Card Flip On Hover

In this post, we will make an image card using pure HTML and CSS. The image will flip on hover and the backside of the card will appear. 

Step 1:  HTML

Make a HTML file by adding .html extension to file name

1. First add a div tag and give that div a class container i.e. class="container"

2. Then add a div inside container class div with class="card_container".

3. Now add another div inside card_container with class="card".

4. Add two div tags inside card class:-    

   i.  Add class="card_front" to first nested div.    

            Now add img tag in this div and give the image path to the src attribute.

   ii. Add class="card_back" to second div.                           

           Add an h3 and a p tag in card_back

This is how the code will look like:-

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Card Flip</title> <!-- ......Title...... -->
  5. </head>
  6. <body>
  7. <div class="container">
  8. <div class="card_container">
  9. <div class="card">
  10. <div class="card_front">
  11. <img src="tiger.jpeg" width="250px">
  12. </div>
  13. <div class="card_back">
  14. <h3>Tiger</h3>
  15. <h5>National Animal of India</h5>
  16. </div>
  17. </div>
  18. </div>
  19. </div>
  20. </body>
  21. </html>

Step: 2  CSS

Make a CSS file by adding .css extension to filename.

1. Add these CSS properties to CSS file

  1. .container{
  2. width: 100%;
  3. height: 100vh;
  4. display: flex;
  5. justify-content: center;
  6. align-items: center;
  7. }

.container will style the container class div Width 100% and height 100vh will cover the full screen.  By adding display flex, we can use justify-content and align-items properties to place all the items of the container in the center horizontally and vertically.

Add the following code to your CSS file.

  1. .card_container{
  2. width: 250px;
  3. height: 350px;
  4. position: relative;
  5. }
  6. .card{
  7. position: absolute;
  8. height: 100%;
  9. width: 100%;
  10. border-radius: 10px;
  11. box-shadow: 4px 10px 10px 0 rgba(0,0,0, 0.5);
  12. }

Add position: relative to .card_container and position: absolute and 100% height & width to .card. Now card div covers all space of card_container div.  Box shadow property adds a 3d effect to the card.

The next code adds transform property. The card now rotates 180 deg when we hover on it. To make the transition visible, added the transition property to card class. The transition duration is set to 1 second with ease-in-out animation.

  1. .card{
  2. transition: transform 1s ease-in-out;
  3. transform-style: preserve-3d;
  4. }
  5. .card_container:hover .card{
  6. transform: rotateY(180deg);
  7. }

Next....

To place the card_front and card_back div on top of each other add the following code to the CSS. Both card_front and card_back take the full width and height of the parent div. Now the card_back is on card_front. The border-radius property is used to make rounded corners. 

  1. .card div{
  2. position: absolute;
  3. height: 100%;
  4. width: 100%;
  5. border-radius: 10px; /*to make rounded corners*/
  6. overflow: hidden;
  7. }

Now to style the card_back div add the following code. In this code, items are centred and text color property is given black and the background is green. To place the card_back div backside of card_front, use transform property i.e transform: rotateY(180deg); Last, add some style to h3 and h5 tags for better look.

  1. .card .card_back{
  2. display: flex;
  3. flex-direction: column;
  4. align-items: center;
  5. justify-content: center;
  6. color: #000;
  7. background-color: green;
  8. transform: rotateY(180deg);
  9. }
  10. h3{
  11. font-weight: 600;
  12. font-size: 40px
  13. }
  14. h5{
  15. color: #f2f2f2;
  16. letter-spacing: 1px;
  17. border-bottom: 2px solid grey;
  18. }


Final CSS code:

  1. .container{
  2. display: flex;
  3. justify-content: center;
  4. align-items: center;
  5. width: 100%;
  6. height: 100vh;
  7. }
  8. .card_container{
  9. width: 250px;
  10. height: 350px;
  11. position: relative;
  12. }
  13. .card{
  14. position: absolute;
  15. height: 100%;
  16. width: 100%;
  17. transition: transform 1s ease-in-out;
  18. transform-style: preserve-3d;
  19. border-radius: 10px;
  20. box-shadow: 4px 10px 10px 0 rgba(0,0,0, 0.5);
  21. }
  22. .card_container:hover .card{
  23. transform: rotateY(180deg);
  24. }
  25. .card div{
  26. position: absolute;
  27. height: 100%;
  28. width: 100%;
  29. border-radius: 10px; /*to make rounded corners*/
  30. overflow: hidden;
  31. }
  32. .card .card_back{
  33. display: flex;
  34. flex-direction: column;
  35. align-items: center;
  36. justify-content: center;
  37. background-color: green;
  38. transform: rotateY(180deg);
  39. }
  40. h3{
  41. font-weight: 600;
  42. font-size: 40px
  43. }
  44. h5{
  45. color: #f2f2f2;
  46. letter-spacing: 1px;
  47. border-bottom: 2px solid grey;
  48. }



Click on banner below to Learn: PHP with Laravel for beginners - Become a Master in Laravel

About Sachin Kumar

I am Sachin Kumar. I am a freelancer who works in front-end and Flutter. Here at flowkl.com, I write about CSS animations and beautiful UI & UX in Flutter. You can contact me at sachin@flowkl.com

Related Articles

With the expanding market of mobile apps, the developers are struggling to maintain the code bases for Native apps. M...
5 Elite and Imperative Hybrid App Frameworks
Django is a great framework in python. But all of the hosting do not provide django hosting in their shared or free h...
Cheap Django Hosting
Laravel provides blade template. Blade files are similar to php files and cover all features of php files. In additio...
Blade Template in Laravel 7

Full-Stack Web Development with React

Best Udemy Courses

Top Posts

Recent Posts

The Complete Web Developer Course - Build 25 Websites

Subscribe

Subscribe now and get weekly updates directly in your inbox!

Any Course on Udemy in $6 (INR 455)

Development Category (English)300x250

PHP with Laravel for beginners - Become a Master in Laravel