How to flip an image on hover in css

Updated:

In this article we learn how to create a flip an image on hover in css. CSS is a powerful tool we can do lots of thing in css like 3d flip animation, flip on hover, glow and many other things. But in this article we discuss only flip an image.

HTML Part


<h2>Flip an Image</h2>
<p>Move your mouse over the image.</p>

<img src="http://technobush.com/wp-content/uploads/2019/06/techno1.png" class="demo" alt="Paris" width="400" height="300">

</body>

CSS Part

<style>
.demo:hover {
-webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);}
</style>

Demo

Flip an Image

Move your mouse over the image.

flip an image

Try It Yourself

I've loved ❤ technology and always curious about new tech innovation. I've been a technology writer and passionate blogger for last 3 year and write How to guide to help people become a tech-savvy.

Leave a Comment