Need to add front and back images to flipping divs

Question

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.

Answer 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);
}