How to Flip an Image on hover using CSS? Last Updated : 08 Oct, 2024 Comments Improve Suggest changes Like Article Like Report Flipping an image with a mirror effect on hover using CSS enhances visual interaction by applying transformations along the X or Y axis. This dynamic hover animation creates an engaging experience by flipping the image horizontally or vertically, resulting in an eye-catching, interactive effect.Approach: Flipping an Image Using CSS TransformTo create a flip effect on hover, we use the CSS transform property. By applying scaleX(-1), the image flips horizontally along the X-axis, while scaleY(-1) flips it vertically along the Y-axis. These transformations generate a mirror effect, triggered dynamically when the user hovers over the image. The flip happens smoothly, enhancing user interaction with a simple yet effective animation.Syntaxtransform: none|transform-functions|initial|inherit;Example 1: Flip Image HorizontallyIn this example we use CSS hover effect on an image. When the user hovers over the image, it flips horizontally using the scaleX(-1) transformation. html <!DOCTYPE html> <html> <head> <style> img:hover { transform: scaleX(-1); } </style> </head> <body> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20241008160354095180/gfg-d.png" width="50%" height="50%"> </body> </html> Output: Flip Image Horizontally Example OutputExample 2: Flip Image Vertically In this example, hovering over the image triggers a vertical flip using the transform: scaleY(-1) property in CSS. This creates a mirror effect, flipping the image upside down on hover. html <!DOCTYPE html> <html> <head> <style> img:hover{ transform: scaleY(-1); } </style> </head> <body> <h2>GeeksforGeeks</h2> <img src="gfg.jpg" width="50%"> </body> </html> Output:Flip Image Vertically Example Output Comment More infoAdvertise with us Next Article How to Flip an Image on hover using CSS? R riyakalra59 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to Zoom an Image on Mouse Hover using CSS? CSS plays a vital role in styling modern websites, with over 90% of sites using it for visual effects and responsive layouts. One popular effect is image zoom on hover, which enhances user experience and adds visual appeal. In this article, you’ll learn three simple ways to create image zoom effects 2 min read How to Change Image Opacity on Hover using CSS ? Changing the opacity of an image on hover can add a more elegant and interactive effect to your website. This simple yet effective technique can be implemented using CSS. When a user hovers over an image, it gradually becomes more transparent, pointing out the interaction and creating an attractive 2 min read How to Change Image on hover with CSS ? To change an image on hover with CSS, use the :hover pseudo-class on the image element and alter its properties, such as background-image or content, to display a different image when hovered over. Here are some common approaches to changing the image on hover: Table of Content Using Background Imag 2 min read How to Change Image on Hover using Tailwind CSS? One common effect is changing an image when the user hovers over it. We use Tailwind CSS, a utility-first CSS framework, to accomplish this without any additional JavaScript logic for the hover effect. By utilizing Tailwind's built-in classes we can create smooth transitions between two images where 2 min read How to create icon hover effect using CSS ? To style an icon's color, size, and shadow using CSS, use the color property to set the icon's color, font size to adjust its size, and text-shadow or box-shadow for adding shadow effects, creating a visually appealing and dynamic look.Using: hover Pseudo-ClassUsing the: hover pseudo-class, you can 2 min read Like