Table of Contents
When it comes to portfolio, creativity matters. In a fact, creativity can help you being hired by potential client. All you have to do is to impress him. One way that we will practice today, is via CSS transform property, a bit of 3D and some transition as a cherry on top. Our goal for this challenge will be to create a card that will flip on hover. This card will have two different sides and it will switch between them, so it will act like a real card.
You can use this feature in your portfolio for example, by placing a snapshot of your work on one side and link with description on another. In this post, we will make it easier and only use two different images.
Except two images for front and back side of the card no other external resources will be needed.
Codepen live demo:
https://codepen.io/d3v3r0/pen/onhkF
Github codes:
https://github.com/d3v3r0/flip-card-css
HTML
HTML setting for this project will be very simple. We will need only four div elements. First will have class “card-container”. Inside this div will be nested div with class ”sides”. The last two div elements, “front” and “back”, will be wrapped placed in div “sides”.
HTML:
<div class="card-container" > <div class="sides"> <div class="front"></div> <div class="back"></div> </div> </div>
This is all for HTML so we can move to CSS and make everything work exactly like we want.
CSS
Before we can create flipping effect, we have to style up the div elements. Let’s start with “card-container” and both sides by setting their “width” property to “320px” and “height” to “480px”. After this, we can finish styling of “card-container” div by setting “perspective” property to “100”. The “perspective” property defines how many pixels is the element distant from the view.
CSS:
.card-container, .front, .back {
width: 320px;
height: 480px;
}
.card-container {perspective: 100;}
Next is to style up the div with class “sides”. We will start by setting its “position” property to “relative” and “transform-style” to “preserve-3d”. “transform-style” property specifies how elements inside the “sides” div will be rendered. To smoother the flipping effect, let’s add a “transition“ and set it to “.6s”.
CSS:
.sides {
position: relative;
transform-style: preserve-3d;
transition: .6s;
}
Now we will set up CSS that will apply for both of the sides. First thing is to set their “position” property to “absolute” along with “top” and “left” properties set to “0”. Since, “sides” div is positioned relatively, both sides will be placed in its top left corner. On the last line will be “backface-visibility” set to hidden. This will ensure that, when not facing the screen, all elements (sides) will be hidden. Without this, we would get a glitch on flip effect in the form of showing wrong side of the card.
CSS:
.front,
.back {
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
}
Front side or face of the card will be simple. It will require four lines of code starting with “z-index” set to “2” to place the “front” div into forefront. Next is “background” linked to external image. For this, I chose a cover of comic book about Lex Luthor and Superman called Man of Steel. Size of the background will be “100%” for both, width and height so the image will cover whole are of div no matter the ratio. We will also include a fix for some browsers in form “transform” property set to “rotateY(0deg)”.
CSS:
.front {
z-index: 2;
background: url(http://static.tvtropes.org/pmwiki/pub/images/4567_400x600.jpg) no-repeat;
background-size: 100% 100%;
transform: rotateY(0deg);
}
After front side, we have to put together the back side of card. As with front we will also use “background” and link it to external image. Now it will be cover of older issue of Superman comic book. Size will be again “100%”. However, in case of back side, the “transform” property will be set to “rotateY(180deg)”. This will allow the back side to be visible when the card is flipped. Without it, it would remain blank.
CSS:
.back {
background: url(http://i1-news.softpedia-static.com/images/news2/Superman-Explained-Why-the-Red-Undies-over-the-Costume-2.jpg) no-repeat;
background-size: 100% 100%;
transform: rotateY(180deg);
}
Last thing to do is to set up the flipping effect. We will select “card-container” on “hover” state followed by “sides” div. For this let’s create rule containing “transform” property set to “rotateY(180deg)”. Thanks to this, when we hover over the “card-container” div, div with class “sides” will turn itself around its y axis for 180 degrees and sides will be switched.
CSS:
.card-container:hover .sides {transform: rotateY(180deg);}
Summary
Good job. Challenge accepted and solved. We have card with smooth flipping effect on hover just like we wanted. There are various modifications you do to the effect, like flipping vertically instead of horizontally for example. You can also add fading if you want. I hope you had fun doing this tutorial.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
