Parallax Flip Cards
with jQuery and CSS

Learn Web Design

Parallax Flip Cards with CSS

We must admit, this is a pretty awesome shortcode. By now, most of you who are reading this have probably seen the traditional flip card. It uses many of the same CSS styles to create the effect; however, we wanted to take this concept a bit further.

These are what we like to call "parallax flip cards". We think they could be useful for many different sites but really could come in handy for photographers, interior designers, architects, artists, or any website that uses a lot of images. These provide a way to add additional content to your image that transcends the typical image overlay with text.

The idea behind these is pretty straightforward. We are going to have a wrapper class we call .flip-card. This wrapper will use the CSS3 properties transform-style: preserve-3d and perspective: 1000px. We will then add two separate children divs with classes .front and .back. Each of these will have a fair amount of CSS properties, but the most important is that they will have backface-visibility: hidden;, an absolute height, width: 100%;, background-size: cover;. The background image and the background-attachment can be styled in-line on your HTML elements.

We are then going to give each child div, .front and .back, a semi-transparent, black overlay so that we can place text on top of our background image. To accomplish this we are going to add the pseudo class ::after to each of our divs and give each a width of 100%, a height of 100%, an rgba background color, a position value of absolute, and set top, bottom, left, and right to 0. For the inner text div, we add some unique 3d transformations that we suggest you check out below.

Now for the Javascript and the animation. This effect can be applied with only CSS, so if you are not comfortable with Javascript, simply replace all instance of .hovered with the CSS :hover selector in your stylesheet. The concept for the flip animation is as follows. We are going to toggle a class called .hovered on our parent .flip div. This will do two things. If the front is facing toward you, when the class .hovered is applied to the parent div, the .front child div will have transform: rotateY(-180deg); and transform-style: preserve-3d applied. When the back is facing and the .hovered class is applied, the only change will be that transform: rotateY(180deg); is applied. Notice the positive 180deg compared to the negative 180deg for the front.

For the jQuery, we are simply going to call our document.ready function and have our camera icon act as our event handler. Once the camera icon is clicked we are going to travel up the DOM tree until we find our parent class .flip and toggle the .hovered class. Simple enough.

Note: If you don't like the parallax effect on scroll but still want to maintain the illusion of 3d with your inner text, just change the CSS property from background-attachment: fixed; to background-attachment: scroll.

Flip Card - Left to Right

Click the camera icon to see the effect in action.

Tokyo

The capital city of Japan.

Omoide

The capital city of Japan.

<div class="flip-card text-center">
<div class="front" style="height: 700px; background-image: url("tokyo.jpg"); background-attachment: fixed; background-position: center;">
<div class="inner">
<div class="card nobg noborder text-center">
<div class="card-body">
<i class="icon-line2-camera h1"></i>
<h3 class="card-title text-white">Tokyo</h3>
<p class="card-text t400">The capital city of Japan.</p>
</div>
</div>
</div>
</div>
<div class="back" style="height: 700px; background-image: url("tokyo_omoide.jpg"); background-attachment: fixed; background-position: left;">
<div class="inner">
<div class="card nobg noborder text-center">
<div class="card-body">
<i class="icon-line2-camera h1"></i>
<h3 class="card-title text-white">Omoide</h3>
<p class="card-text t400">The capital city of Japan.</p>
</div>
</div>
</div>
</div>
</div>
.flip-card {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.flip-card .front,
.flip-card .back {
background-size: cover;
background-position: center;
-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
-o-transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1),
-webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
width: 100%;
height: 400px;
border-radius: 6px;
color: #FFF;
font-size: 1.5rem;
}
.back { background-color: #666; }
.flip-card .front.no-after:after,
.flip-card .back.no-after:after { content: none }
.flip-card .front:after,
.flip-card .back:after {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
content: "";
display: block;
opacity: 0.4;
background-color: #000;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 6px;
}
.flip-card.hovered .front,
.flip-card.hovered .back {
-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
-o-transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1),
-webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.flip-card .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.flip-card .inner {
-webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
transform: translateY(-50%) translateZ(60px) scale(0.94);
top: 50%;
position: absolute;
left: 0;
width: 100%;
padding: 2rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: 1px solid transparent;
-webkit-perspective: inherit;
perspective: inherit;
z-index: 2;
}
.flip-card .back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.flip-card .front,
.flip-card.hovered .back {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.flip-card.hovered .front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.flip-card.top-to-bottom .back {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.flip-card.top-to-bottom .front,
.flip-card.top-to-bottom.hovered .back {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.flip-card.top-to-bottom.hovered .front {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
</script>
$(document).ready(function(){
$(".icon-line2-camera").hover(function(){
$(this).addClass("rotate-scale-up");
}, function(){
$(this).removeClass("rotate-scale-up");
});
$(".icon-line2-camera").click(function(){
$(this).closest(".flip-card").toggleClass("hovered");
});
});
</script>

Flip Card - Top to Bottom

Click the camera icon to see the effect in action.

Paris

Many call it the most romantic city on Earth.

Arc De Triomphe

Many call it the most romantic city on Earth.

<div class="flip-card top-to-bottom text-center">
<div class="front" style="background-image: url("eiffel_tower.jpg"); background-attachment: fixed; background-position: center;">
<div class="inner">
<div class="card nobg noborder text-center">
<div class="card-body">
<i class="icon-line2-camera h1"></i>
<h3 class="card-title text-white">Tokyo</h3>
<p class="card-text t400">The capital of Japan.</p>
</div>
</div>
</div>
</div>
<div class="back" style="background-image: url("arc_de_triomphe.jpg"); background-attachment: fixed; background-position: center;">
<div class="inner">
<div class="card nobg noborder text-center">
<div class="card-body">
<i class="icon-line2-camera h1"></i>
<h3 class="card-title text-white">Omoide</h3>
<p class="card-text t400">The capital of Japan.</p>
</div>
</div>
</div>
</div>
</div>
.flip-card {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.flip-card .front,
.flip-card .back {
background-size: cover;
background-position: center;
-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
-o-transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1),
-webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
width: 100%;
height: 400px;
border-radius: 6px;
color: #FFF;
font-size: 1.5rem;
}
.back { background-color: #666; }
.flip-card .front.no-after:after,
.flip-card .back.no-after:after { content: none }
.flip-card .front:after,
.flip-card .back:after {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
content: "";
display: block;
opacity: 0.4;
background-color: #000;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 6px;
}
.flip-card.hovered .front,
.flip-card.hovered .back {
-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
-o-transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1),
-webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.flip-card .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.flip-card .inner {
-webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
transform: translateY(-50%) translateZ(60px) scale(0.94);
top: 50%;
position: absolute;
left: 0;
width: 100%;
padding: 2rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: 1px solid transparent;
-webkit-perspective: inherit;
perspective: inherit;
z-index: 2;
}
.flip-card .back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.flip-card .front,
.flip-card.hovered .back {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.flip-card.hovered .front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.flip-card.top-to-bottom .back {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.flip-card.top-to-bottom .front,
.flip-card.top-to-bottom.hovered .back {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.flip-card.top-to-bottom.hovered .front {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
</script>
$(document).ready(function(){
$(".icon-line2-camera").hover(function(){
$(this).addClass("rotate-scale-up");
}, function(){
$(this).removeClass("rotate-scale-up");
});
$(".icon-line2-camera").click(function(){
$(this).closest(".flip-card").toggleClass("hovered");
});
});
</script>