Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Flip an image on mouse over with CSS
The CSS transform property can be used to flip an image horizontally when a user hovers over it. This creates an engaging interactive effect by using the scaleX(-1) value to mirror the image along its X-axis.
Syntax
selector:hover {
transform: scaleX(-1);
}
Example: Horizontal Image Flip on Hover
The following example demonstrates how to flip an image horizontally when the mouse hovers over it −
<!DOCTYPE html>
<html>
<head>
<style>
.flip-image {
width: 300px;
height: 200px;
transition: transform 0.3s ease;
}
.flip-image:hover {
transform: scaleX(-1);
}
</style>
</head>
<body>
<h2>Image Flip Effect</h2>
<p>Hover over the image below to see the flip effect:</p>
<img class="flip-image" src="/python/images/python_data_science.jpg"
alt="Python Data Science">
</body>
</html>
An image appears on the page. When you hover over it, the image smoothly flips horizontally (mirrors along the Y-axis) and returns to normal when the mouse moves away.
Example: Vertical Image Flip
You can also flip an image vertically using scaleY(-1) instead −
<!DOCTYPE html>
<html>
<head>
<style>
.flip-vertical {
width: 300px;
height: 200px;
transition: transform 0.3s ease;
}
.flip-vertical:hover {
transform: scaleY(-1);
}
</style>
</head>
<body>
<h2>Vertical Flip Effect</h2>
<p>Hover over the image to see vertical flip:</p>
<img class="flip-vertical" src="/python/images/python_data_science.jpg"
alt="Python Data Science">
</body>
</html>
An image appears that flips vertically (upside down) when hovered over, creating a smooth transition effect.
Key Points
-
scaleX(-1)flips the image horizontally -
scaleY(-1)flips the image vertically - Adding
transitionproperty creates smooth animation - The
:hoverpseudo-class triggers the effect on mouse over
Conclusion
Using CSS transform: scaleX(-1) with the :hover selector provides an easy way to create interactive image flip effects. Adding a transition makes the transformation smooth and visually appealing.
Updated on: 2026-03-15T12:53:17+05:30
460 Views
Advertisements