DEV Community

Soft Heart Engineer
Soft Heart Engineer

Posted on

2 1

Flip Card on Hover in CSS

#codepen #webdev #html #css

Check out this Pen I made!

Top comments (3)

Collapse
 
eddocode profile image
Eddocode •

Great effect, looks nice :D

Collapse
 
dylantrepos profile image
Dylan Trepos •

One advice, you should rather do the hover detection on parent card, like that you'll not have a weird effect when slowly moving mouse from left or right for example.
Instead of

.card:hover {
  transform: rotateY(180deg);
}
Enter fullscreen mode Exit fullscreen mode

It would be better to set

.card-container:hover .card {
  transform: rotateY(180deg);
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
akashmaurya profile image
AkashMaurya • • Edited

its very Good Sir :)

Retry later

Read next

shaikhkamran profile image

How I Build about 60% of My App's Codebase in a day.

kamran -

tqbit profile image

Master Efficient Window Scroll Event Handling in JavaScript: Best Practices and Tips

tq-bit -

prince_beec5ccde00b7c6c73 profile image

Password Validator using html css and javascript

Prince -

srbhr profile image

How These Free Open Source Projects Can Jumpstart Your Career (No Experience? No Problem!)

Saurabh Rai -

Retry later