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
Change Image Opacity on Mouse Over
The CSS opacity property combined with the :hover selector allows you to create interactive effects by changing an image's transparency when users hover over it. This technique is commonly used to create smooth visual feedback for image galleries, buttons, and interactive elements.
Syntax
selector {
opacity: value;
transition: duration;
}
selector:hover {
opacity: value;
}
Possible Values
| Value | Description |
|---|---|
0 |
Completely transparent (invisible) |
0.1 to 0.9 |
Semi-transparent with varying levels |
1 |
Completely opaque (normal visibility) |
Example 1: Semi-Transparent on Hover
The following example reduces the image opacity to 0.3 (30% visible) when hovered −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
.fade-image {
width: 270px;
height: 200px;
opacity: 1;
transition: opacity 0.3s ease;
}
.fade-image:hover {
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Hover to Fade Image</h2>
<img class="fade-image" src="/java/images/java-mini-logo.jpg" alt="Java Logo">
<p>Hover over the image to see the fade effect</p>
</body>
</html>
An image appears normally. When you hover over it, the image fades to 30% opacity with a smooth 0.3-second transition effect.
Example 2: Fully Transparent on Hover
This example makes the image completely invisible when hovered −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
.disappear-image {
width: 270px;
height: 200px;
opacity: 1;
transition: opacity 0.3s ease;
}
.disappear-image:hover {
opacity: 0;
}
</style>
</head>
<body>
<h2>Hover to Hide Image</h2>
<img class="disappear-image" src="/java/images/java-mini-logo.jpg" alt="Java Logo">
<p>Hover over the image to make it disappear</p>
</body>
</html>
An image appears normally. When you hover over it, the image completely disappears with a smooth transition effect.
Example 3: Reveal Hidden Image on Hover
This example starts with a hidden image and reveals it on hover −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
.reveal-image {
width: 270px;
height: 200px;
opacity: 0;
transition: opacity 0.3s ease;
}
.reveal-image:hover {
opacity: 1;
}
</style>
</head>
<body>
<h2>Hover to Reveal Image</h2>
<img class="reveal-image" src="/java/images/java-mini-logo.jpg" alt="Java Logo">
<p>Hover over the space above to reveal the hidden image</p>
</body>
</html>
An invisible image placeholder appears. When you hover over the area, the image smoothly fades in and becomes fully visible.
Key Points
- The transition property creates smooth opacity changes instead of abrupt transitions
- Opacity values range from 0 (transparent) to 1 (opaque)
- The :hover pseudo-selector triggers the effect on mouse over
- This technique works on any HTML element, not just images
Conclusion
Changing image opacity on hover is an effective way to create interactive visual effects. The combination of the opacity property, :hover selector, and transition property provides smooth, professional-looking hover animations that enhance user experience.
2K+ Views
