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:-
- <!DOCTYPE html>
- <html>
- <head>
- <title>Card Flip</title> <!-- ......Title...... -->
- </head>
- <body>
-
- <div class="container">
- <div class="card_container">
- <div class="card">
- <div class="card_front">
- <img src="tiger.jpeg" width="250px">
- </div>
- <div class="card_back">
- <h3>Tiger</h3>
- <h5>National Animal of India</h5>
- </div>
- </div>
- </div>
- </div>
-
-
- </body>
- </html>
Step: 2 CSS
Make a CSS file by adding .css extension to filename.
1. Add these CSS properties to CSS file
- .container{
- width: 100%;
- height: 100vh;
- display: flex;
- justify-content: center;
- align-items: center;
- }
.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.
- .card_container{
- width: 250px;
- height: 350px;
- position: relative;
-
- }
-
- .card{
- position: absolute;
- height: 100%;
- width: 100%;
- border-radius: 10px;
- box-shadow: 4px 10px 10px 0 rgba(0,0,0, 0.5);
- }
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.
- .card{
- transition: transform 1s ease-in-out;
- transform-style: preserve-3d;
-
- }
-
- .card_container:hover .card{
- transform: rotateY(180deg);
- }
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.
- .card div{
- position: absolute;
- height: 100%;
- width: 100%;
- border-radius: 10px; /*to make rounded corners*/
- overflow: hidden;
-
- }
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.
- .card .card_back{
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- color: #000;
- background-color: green;
- transform: rotateY(180deg);
- }
-
- h3{
- font-weight: 600;
- font-size: 40px
- }
- h5{
- color: #f2f2f2;
- letter-spacing: 1px;
- border-bottom: 2px solid grey;
- }
Final CSS code:
- .container{
- display: flex;
- justify-content: center;
- align-items: center;
- width: 100%;
- height: 100vh;
- }
-
-
- .card_container{
- width: 250px;
- height: 350px;
- position: relative;
-
- }
-
- .card{
- position: absolute;
- height: 100%;
- width: 100%;
- transition: transform 1s ease-in-out;
- transform-style: preserve-3d;
- border-radius: 10px;
- box-shadow: 4px 10px 10px 0 rgba(0,0,0, 0.5);
-
-
- }
-
- .card_container:hover .card{
- transform: rotateY(180deg);
- }
-
- .card div{
- position: absolute;
- height: 100%;
- width: 100%;
- border-radius: 10px; /*to make rounded corners*/
- overflow: hidden;
-
- }
-
-
- .card .card_back{
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- background-color: green;
- transform: rotateY(180deg);
- }
-
- h3{
- font-weight: 600;
- font-size: 40px
- }
- h5{
- color: #f2f2f2;
- letter-spacing: 1px;
- border-bottom: 2px solid grey;
- }
