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.
Page Contents
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.
