In this article, you will learn how to flip an image (add mirror effect), both horizontally and vertically when the mouse has hovered over it. This can be done by applying the transformation to the image as shown in the following example:
Example 1: This example represents how to flip image horizontally by transforming it along the X-axis using transform: scaleX(-1) property.
Example 2: This example represents how to flip image vertically by transforming it along the Y-axis using transform: scaleY(-1) property.
- How to Create Image Overlay Hover using HTML & CSS ?
- How to Zoom an Image on Mouse Hover using CSS ?
- CSS | Animation to Change the Hover State of a Button/Image
- CSS Image overlay hover title
- How to change image on hover with CSS ?
- How to create X and Y axis flip animation using HTML and CSS ?
- How to add a black hover to an image using bootstrap?
- Convert an image into grayscale image using HTML/CSS
- How to Shift Inline Elements When Text Bold on Hover using CSS ?
- How to zoom an element on Hover using CSS ?
- How to create Skewed Background with hover effect using HTML and CSS?
- How to create paper corner fold effect on hover by using HTML and CSS?
- How to Create Animated Navigation Bar with Hover Effect using HTML and CSS ?
- How to spin text on mouse hover using HTML and CSS?
- Shake a Button on Hover using HTML and CSS
- How to change opacity of every data element on hover in a table using CSS ?
- How to rotate a text 360 degrees on hover using HTML and CSS?
- How to Skew Text on Hover using HTML and CSS?
- How to Create Ghost Text Animation on Hover using HTML and CSS?
- Shrink Text on Hover using HTML and CSS
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.