0

So ive been struggling with this set of code for a while now and I am so close to finishing it.

First problem was getting my images to be responsive to height and width, but after some discussions I was able to figure out how to make it responsive by simplifying the code and using colors as placeholders but now I cant figure out how to re-add the background images.

Here is the OG codepen, http://codepen.io/anon/pen/YypXjw

and here it is now, http://codepen.io/anon/pen/rOWXzW

* { color: #fff; }

.flip-container {
width: 33.333%;
padding-bottom: 33.333%;
float: left;
}

.flip-container:hover .flipper {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}

.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}

.front {
position: absolute;
width: 100%;
padding-bottom: 100%;
}

.front-a {
background: red;
}

.front-b {
background: blue;
}

.front-c {
background: green;
}

I have no idea why I cant get the html to show up as well.

So the code was cleaned up, and now all I need to figure out is how to add a front and back image to the flipping div.

Ive attempted to add front and back divs like the og code but still cant get it to work.

Any help or suggestions is greatly appreciated.

Mario Espinoza
  • 25
  • 9

1 Answers1

1

Codepen

You need the front and back classed divs. You can target the front/back of each using pseudo selectors.

<div class="flip-container">
  <div class="flipper">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</div>

Background size cover and then each front/back's image.

.front, .back {
  background-size: cover;
}

.flip-container:nth-of-type(1) .front {
  background-image: url(image.jpg);
}

.flip-container:nth-of-type(1) .back {
  background-image: url(image.jpg);
}
Alejalapeno
  • 1,008
  • 7
  • 11
  • This works perfectly! Thank you so much. You have no idea how much this is appreciated. – Mario Espinoza Oct 06 '15 at 18:44
  • @MarioEspinoza I updated the codepen and my answer. The a,b,c classes were pretty sloppy so I removed them and used pseudo selectors `nth-of-type(x)`. – Alejalapeno Oct 06 '15 at 18:53
  • @alejapeno I attempted to use your new version of the code and it no longer works.... unfortunately for me, i copied it over your old version and now its not displaying at all :/ – Mario Espinoza Nov 05 '15 at 19:09