Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create Image Overlay Hover Effect with CSS
The image overlay effect on hover is hidden when the page loads and is visible when the mouse cursor is hovered on the image. The ease transition effect is set using the transition property to make the overlay effect possible. Let us see how to create an image overlay hover effect with HTML and CSS.
Set the card container
A parent div is set for the card text, image, and caption −
<div class="card-container">
<img src="https://www.gstatic.com/webp/gallery/4.sm.jpg">
<div class="hoverText">
<div class="caption">Tree</div>
</div>
</div>
Position the card container
The card container is positioned relative using the position property −
.card-container {
display: inline-block;
position: relative;
width: 50%;
}
Overlay effect
The transition is set to the ease effect with the transition property for the overlay. The position of the overlay is set to absolute −
.hoverText {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 40%;
text-align: center;
}
On hovering the card container, the opacity is changed using the opacity property −
.card-container:hover img {
opacity: 0.4;
}
.card-container:hover .hoverText {
opacity: 1;
}
The overlay caption
The caption on the image is set using the border-radius property −
.caption {
background-color: rgb(18, 53, 131);
color: white;
font-size: 30px;
padding: 20px;
border-radius: 6px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bolder;
}
Example
The following is the code to create image overlay hover effects with CSS −
<!DOCTYPE html>
<html>
<head>
<style>
.card-container {
display: inline-block;
position: relative;
width: 50%;
}
img {
opacity: 1;
display: block;
width: 100%;
transition: .5s ease;
backface-visibility: hidden;
}
.hoverText {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 40%;
text-align: center;
}
.card-container:hover img {
opacity: 0.4;
}
.card-container:hover .hoverText {
opacity: 1;
}
.caption {
background-color: rgb(18, 53, 131);
color: white;
font-size: 30px;
padding: 20px;
border-radius: 6px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bolder;
}
</style>
</head>
<body>
<h1>Image Overlay effect Example</h1>
<div class="card-container">
<img src="https://www.gstatic.com/webp/gallery/4.sm.jpg">
<div class="hoverText">
<div class="caption">Tree</div>
</div>
</div>
</body>
</html>
1K+ Views
