Jump to content

Multiple flip cards with different sizes? (isolating their pixel attributes?)


mv53

Recommended Posts

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! 

 

 

different size flip cards.png

Edited by mv53
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...