How to make simple card with flipping effect when hovers over it.
Structure of Card
We need a container which will hold two divs, one for front and another for back of the card :
|
1 2 3 4 5 6 |
<div class="flip-card"> <div class="front"> </div> <div class="back"> </div> </div> |
Set the dimension of the container :
|
1 2 3 4 5 |
.flip-card { width: 25%; height: 200px; background: red;/*for testing, we will remove it later*/ } |
Make those two divs inside the container overlap each other :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.flip-card { /*..*/ position: relative; } .flip-card .front, .flip-card .back { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: yellow;/*for testing, we will remove it later*/ } |
Set an image to the front of the card :
|
1 2 3 4 5 6 7 8 9 |
.flip-card .front, .flip-card .back { position: absolute; top: 0; left: 0; bottom: 0; right: 0; /*background: yellow;*//*remove it*/ background-size: cover;/*and add this*/ } |
|
1 2 3 4 5 6 |
<div class="flip-card"> <div class="front" style="background-image:url(https://web.opendrive.com/api/v1/download/file.json/NTlfMjE4NTg1NDVf?inline=1)"> </div> <div class="back"> </div> </div> |
Set the text :
|
1 2 3 4 5 6 7 |
<div class="flip-card"> <div class="front" style="background-image:url(https://web.opendrive.com/api/v1/download/file.json/NTlfMjE4NTg1NDVf?inline=1)"> </div> <div class="back"> Lorem ipsum </div> </div> |
Flip Image on hover
Add rotation animation on hover :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.flip-card { width: 25%; height: 200px; /*background: red;*//*remove it*/ position: relative; } .flip-card .front, .flip-card .back { /*..*/ transition: .3s; } .flip-card:hover .front { transform: rotateY(180deg); } |
Disable backface visibility :
|
1 2 3 4 |
.flip-card .front, .flip-card .back { /*..*/ backface-visibility: hidden; } |
Make the flip animation look 3D :
|
1 2 3 4 |
.flip-card { /*..*/ perspective: 100vw; } |
Style text
|
1 2 3 4 5 |
.flip-card .back { background: #333; color: #fff; overflow: hidden; } |
Set padding and change font :
|
1 2 3 4 5 |
.flip-card .back { /*..*/ padding: 8px; font-family: Arial, Helvetica, sans-serif; } |
Align text at center :
|
1 2 3 4 5 6 7 8 |
.flip-card .back { /*..*/ display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; } |
Flip text on hover
Set the text intially set at the back side of the card :
|
1 2 3 4 |
.flip-card .back { /*..*/ transform: rotateY(180deg); } |
|
1 2 3 |
.flip-card:hover .back { transform: rotateY(360deg); } |
Add scale animation (optional)
|
1 2 3 4 5 6 7 8 9 10 11 |
.flip-card .back { transform: rotateY(180deg) scale(0.5); } .flip-card:hover .front { transform: rotateY(180deg) scale(0.5); } .flip-card:hover .back { transform: rotateY(360deg) scale(1); } |
Add some more style (optional)
|
1 2 3 4 5 6 7 |
.flip-card .front, .flip-card .back { /*..*/ border: 2px solid #333; box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); box-sizing: border-box;/*so that border does not increase card's size*/ } |
Make cards more responsive
First add some more cards :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<div class="flip-card"> <div class="front" style="background-image:url(https://web.opendrive.com/api/v1/download/file.json/NTlfMjE4NTg1NDVf?inline=1)"> </div> <div class="back"> Lorem ipsum </div> </div> <div class="flip-card"> <div class="front" style="background-image:url(https://web.opendrive.com/api/v1/download/file.json/NTlfMjE4NTg1MTZf?inline=1)"> </div> <div class="back"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat, enim quis bibendum fringilla, elit erat auctor quam, at malesuada neque urna sed arcu </div> </div> <div class="flip-card"> <div class="front" style="background-image:url(https://web.opendrive.com/api/v1/download/file.json/NTlfMjE4NTg1MDhf?inline=1)"> </div> <div class="back"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat, enim quis bibendum fringilla, elit erat auctor quam, at malesuada neque urna sed arcu. Nam iaculis scelerisque sem, vitae laoreet justo pretium id. Cras convallis gravida elit nec dapibus. Nulla nec finibus sem, non iaculis risus </div> </div> <div class="flip-card"> <div class="front" style="background-image:url(https://web.opendrive.com/api/v1/download/file.json/NTlfMjE4NTg1MDZf?inline=1)"> </div> <div class="back"> Lorem ipsum </div> </div> |
Align them horizontally :
|
1 2 3 4 |
.flip-card { /*..*/ float: left; } |
Show different number of cards on different sizes of page :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.flip-card { width: 50%; /*..*/ } @media (min-width: 600px) and (max-width: 992px) { .flip-card { width: 33.333%; } } @media (min-width: 992px) { .flip-card { width: 25%; } } |
Add margins :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.flip-card { width: 48%; margin: 1%; /*width + margin-left + margin-right = 50%*/ /*..*/ } @media (min-width: 600px) and (max-width: 992px) { .flip-card { width: 31%; margin: 1.16%; /*width + margin-left + margin-right = 33.33%*/ } } @media (min-width: 992px) { .flip-card { width: 23%; margin: 1%; /*width + margin-left + margin-right = 25%*/ } } |
Full code is available here.
Issue : Don’t know how to use overflowing text in card. Use less text so that it won’t overflow out of the card.
