Simple and Easy Way to Flip Image in CSS on mouse Hover

By Faruque Ahamed Mollick

Here in this CSS tutorial, I am going to show you the easiest way to flip an image in CSS when someone hovers the mouse on the image.

Flip image in CSS on mouse hover is quite easy.

Suppose we have an image:

<img width="355px;" src="test.jpg">

Now we want to flip our image on mouse hover. To do it we just need to write some CSS code that you can see below:

img {
           -webkit-transition: all .4s ease-in-out;
           -moz-transition: all .4s ease-in-out;
           -ms-transition: all .4s ease-in-out;
           -o-transition: all .4s ease-in-out;
           transition: all .4s ease-in-out
}
  img:hover {
           -moz-transform: scaleX(-1);
           -o-transform: scaleX(-1);
           -webkit-transform: scaleX(-1);
           transform: scaleX(-1);
           
       }
}

In the above code, you can see that we have applied some CSS transition property to our image. The transition allows us to change the CSS property values in a smooth way.

Here we have used the CSS transition property so that our image flip smoothly and it has some animated effect. The ease-in-out value of transition property will also give a smooth effect when the mouse hovers out of the image.

Next, we use the CSS :hover selector to change the property of our image on when the mouse hovers on it.



To flip the picture we have used the CSS transform property. The transform property can apply the 2d or 3d transformation to an element. It can rotate, scale and element.

The transform property is the main thing that can be used to flip a picture on the web page. In our tutorial also we have used this.

In our CSS code, we have set the CSS transform value to scaleX(-1). With this value, our image flips horizontally or along with the X-axis. Thus we are able to give our image a flip effect.

 

Also, read:

 

Now let’s test our work on the browser. If you open it on your browser and hover your mouse cursor on the picture then you will able to see the image flip with nice animation effect. The animation effect is for the transition property.

If we don’t use transition property, then it will not look interesting like it looks with transition property.

So we able to flip an image in CSS with the simple and easiest way.

 

Leave a Reply

Your email address will not be published. Required fields are marked *