CSS Flip Transition Effect - Absolute Positioning Breaks Responsiveness

Question

I'm trying to integrate this CSS Flip Effect with the Portfolio Item Bootstrap template.

What I'm finding is that when the browser window is resized, the page flow gets really screwy because the .card__front and .card__back styles have position: absolute;. If I remove position: absolute;, the correct page flow behavior is restored, but space allocated for the image is still present.

I've tried toggling element.style.display='none'; for front/back, and although that solves the empty space issue, when that's in place I can't even see the split-second flip effect.

Is there any way to both have both the flip effect AND have the page flow be responsive?

Full CodePen is linked below, but here are some excerpts (probably not particularly helpful, but "show code").

HTML

<div class="col-md-8">
    <div class="card effect__click">
        <div class="card__front">
            <img class="img-responsive" src="./cards/1-front.png" alt="">
        </div>
        <div class="card__back">
            <img class="img-responsive" src="./cards/1-back.png">
        </div>
    </div>
</div>

CSS

/* card fronts and backs */
.card__front,
.card__back {
  position: absolute;
  top: 0;
  left: 0;
}

CodePen

Example of proper flip effect, and improper page flow response: http://codepen.io/anon/pen/JEdmdL (click the big grey image to flip it)

Answer 1

First, remove the float attribute or clear it if you really need it. This fixes the flip behavior when you resize to a smaller screen.

.card {
 /*float: left;*/
}

Second, to fix the layout on a smaller screen, you got to allocate enough height for the card's parent (because the card itself has an absolute position). Control that height with attribute padding-bottom which you already use. So, increasing the percentage will do the trick.

.card {
 padding-bottom: 65%;
}

CodePen