mv53 Posted April 26, 2019 Share Posted April 26, 2019 (edited) Hello, I'm using the nifty CSS flip card tutorial, but I can't figure out how to get two or more different sizes of flip cards on the same page. I've tried using some different <div> classes to isolate the cards and embedding the code into individual bootstrap grids, but those aren't working. Here is an example of the code: https://www.w3schools.com/code/tryit.asp?filename=G3GJ056NHIHO Thanks in advance! Edited April 26, 2019 by mv53 Link to comment Share on other sites More sharing options...
Funce Posted April 29, 2019 Share Posted April 29, 2019 That is a pretty nifty tutorial. This was a fun challenge, but I knew it was possible. Would this work? https://www.w3schools.com/code/tryit.asp?filename=G3KAF9EK8AKI <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: Arial, Helvetica, sans-serif; } .flip-card { background-color: transparent; display: inline-block; perspective: 1000px; } .flip-card-inner { position: relative; float:left; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); } .flip-card:hover .flip-card-inner { transform: rotateY(180deg); } .flip-card-front, .flip-card-back { width: 100%; height: 100%; backface-visibility: hidden; } .flip-card-front { background-color: #bbb; color: black; z-index: 2; } .flip-card-back { position: absolute; top: 0; background-color: #2980b9; color: white; transform: rotateY(180deg); z-index: 1; } </style> </head> <body> <h2>In this card, the picture is right but the grey background is too big. I'd like the card to only take up the same space as the picture</h2> <h3>Hover over the image below:</h3> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <img src="https://pixel.nymag.com/imgs/daily/vulture/2016/07/29/29-steve-brule-check-it-out.w700.h700.jpg" alt="Avatar" style="width:200px;height:200px;"> </div> <div class="flip-card-back"> <h1>Dr. Steve Brule</h1> <p>for your health</p> <p>ya dingus</p> </div> </div> </div> <h2>In this card, the picture & background are correct</h2> <h3>Hover over the image below:</h3> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <img src="https://ih0.redbubble.net/image.211529091.3871/flat,550x550,075,f.u1.jpg" alt="Avatar" style="width:300px;height:300px;"> </div> <div class="flip-card-back"> <h1>Hunk</h1> <p>cool guy</p> <p>spicy guacamole</p> </div> </div> </div> </body> </html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now