How we can create a card flip effect with reflection using pure HTML and CSS? Solution: See this CSS Card Flip Reflection Effect On Hover, Flipping Image Change.
Earlier I have shared a CSS Flip Effect program, it also like that but it has reflection which also will change on hover. Basically, a flip card can contain image, text, form, etc and it will flip to backside on hover. After flipping to the backside it will show contents that are placed in the back. It is a good way to put many items in less space, you can put half info on the front side and another half in the backside.
Today you will learn to create a Flipping Image Change program. Basically, there are 3 cards that contain 6 images because one single card has two images, one in front and one in back. Also, you will see a reflection of the image at the bottom of the card. When you will hover on the card it will flip to backside by rotating and show another image. With changing the card image, the reflection will also change.
So, Today I am sharing CSS Card Flip Reflection Effect On Hover. There I have used pure CSS and HTML to create this program. The program is not based on JS or any JS library, you can call it a pure CSS program. This is a good practice of HTML and CSS for beginners who just started learning web development. Also, you can use it on your project or website.
If you are thinking now how this flipping image cards actually are, then see the preview given below.
Preview Of Flipping Image Cards
See this video preview to getting an idea of how these cards look like.
Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
CSS Card Flip Reflection Effect On Hover Source Code
Before sharing source code, let’s talk about it. First I have created a main div and put 3 sections for cards inside it. Also, the section is based on HTML divs, inside each section, I have created two more divs for putting the front and back image. I gave different class names for declaring the front and backside images.
Now using CSS I have placed all the elements in the right place, as you can see in the preview. There I have used flex display to the main div named container and gave perspective values. For creating the reflection effect I have used linear-gradient with transparent and low opacity. And for creating the flip effect I have used CSS transform: rotateY() command.
Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program, you have to create only 2 files, one for HTML and one for CSS. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
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 36 37 38 39 40 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>Card Flip Reflection | Webdevtrick.com</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="card"> <div class="item front-side"> <img src="https://webdevtrick.com/wp-content/uploads/gadget.jpg" /> </div> <div class="item back-side"> <img src="https://webdevtrick.com/wp-content/uploads/cons.jpg" /> </div> </div> <div class="card"> <div class="item front-side"> <img src="https://webdevtrick.com/wp-content/uploads/design.jpg" /> </div> <div class="item back-side"> <img src="https://webdevtrick.com/wp-content/uploads/programming.jpg" /> </div> </div> <div class="card"> <div class="item front-side"> <img src="https://webdevtrick.com/wp-content/uploads/auto.jpg" /> </div> <div class="item back-side"> <img src="https://webdevtrick.com/wp-content/uploads/hardware.jpg" /> </div> </div> </div> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ body { display: flex; justify-content: center; align-items: center; height: 100vh; background: black; } .container { width: 1000px; display: flex; justify-content: space-between; -webkit-perspective: 800px; perspective: 800px; } .container .card { position: relative; width: 240px; height: 300px; color: white; cursor: pointer; transition: 1s ease-in-out; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .container .card:hover { -webkit-transform: rotateY(0.5turn); transform: rotateY(0.5turn); } .container .card .item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: 1s ease-in-out; -webkit-box-reflect: below 0 linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.4)); } .container .card .item img { width: 240px; height: 300px; -o-object-fit: cover; object-fit: cover; } .container .card .back-side { -webkit-transform: rotateY(0.5turn); transform: rotateY(0.5turn); } |
That’s It. Now you have successfully created CSS Card Flip Reflection Effect On Hover, Flipping Image Change Program. If you have any doubt or questions comment down below.
Thanks For Visiting, Keep Visiting.
hello, i’m student of multimedia, and i study the coding for css and htlm, can you help me to fix something of the coding?
thank you so much
sure, contact me on facebook – https://www.facebook.com/webdevtrick