Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create an image overlay zoom effect on hover with CSS?
The image overlay zoom effect on hover is visible on an image when the mouse cursor is hovered. For that, the :hover selector is used. The transition needs to be set for the overlay zoom using the transition property. Let us see how to create an image overload title on hover with HTML and CSS.
Set a container
A container div is set. Within that, set an image for a child div for the overlay −
<div class="card-container">
<img src="https://www.tutorialspoint.com/assets/profiles/123055/profile/200_187394-1565938756.jpg">
<div class="overlay">
<div class="caption">Amit</div>
</div>
</div>
Set the div for overlay and caption
As shown above, a child div is set for the overlay. Within that, a container for caption is also set −
<div class="overlay"> <div class="caption">Amit</div> </div>
Position the container div
The position of the container div is set to relative −
The position of the container div is set to relative:
.card-container {
position: relative;
width: 50%;
}
Style the image
The image is set to 100% width −
img {
display: block;
width: 100%;
}
Position the overlay
The overlay is positioned using the position property with the value absolute. The transition effect is set with the transition property with the ease-in-out effect. The scale() is set to 0 −
.overlay {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
background-color: rgb(55, 74, 179);
overflow: hidden;
width: 100%;
height: 0;
transform:scale(0);
transition: .5s ease-in-out;
}
Zoom on hover
The :hover selector is used to set the hover property. The scale() is set to 1 using the transform property to allow zoom when the mouse cursor is placed −
.card-container:hover .overlay {
height: 100%;
transform: scale(1);
}
Position the caption
On hover, the caption is also visible. It is positioned to be absolute using the position property with the value absolute −
.caption {
color: white;
font-size: 30px;
position: absolute;
top: 40%;
left: 40%;
text-align: center;
}
Example
The following is the code to create an image overlay zoom effect on hover −
<!DOCTYPE html>
<html>
<head>
<style>
.card-container {
position: relative;
width: 50%;
}
img {
display: block;
width: 100%;
}
.overlay {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
background-color: rgb(55, 74, 179);
overflow: hidden;
width: 100%;
height: 0;
transform:scale(0);
transition: .5s ease-in-out;
}
.card-container:hover .overlay {
height: 100%;
transform: scale(1);
}
.caption {
color: white;
font-size: 30px;
position: absolute;
top: 40%;
left: 40%;
text-align: center;
}
</style>
</head>
<body>
<h1>Image Overlay Zoom Example</h1>
<div class="card-container">
<img src="https://www.tutorialspoint.com/assets/profiles/123055/profile/200_187394-1565938756.jpg">
<div class="overlay">
<div class="caption">Amit</div>
</div>
</div>
</body>
</html>
461 Views
