How to create an Image Overlay Zoom Effect on hover using CSS ?
Last Updated :
17 Jan, 2024
Image Overlay Zoom Effect on hover can be done by using CSS. This effect is used in web design for user attention to images by highlighting the content or text, and to improve the overall look of a website by adding dynamic visual effects. We have given a Zoom effect to the text and image when the user hovers over the image.
Preview
Approach
- First create a HTML structure with elements like <h1>, <h3>, <div> and <img>. Link the external stylesheet for styling purposes.
- Use CSS for giving smooth transition effect set the property
transform 0.1s ease-in-out
for the overlay.
- When the element having class named “
.imageContainer"
is hovered, the overlay element defined with a scale transformation for creating a zoom effect.
The element .imageContainer > img
defines the opacity of the image to 0.7
.
- Adjusts the font size of the overlay element to
30px
when the screen width is less than 1392px
. Defines border, and border-radius for styling to the image.
Example: Illustration to create an image overlay zoom effect on hover using CSS.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0">
< link rel = "stylesheet"
href = "style.css" >
< title >
Image Zoom Effect using CSS
</ title >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< h3 >
How to create an image overlay
zoom effect on hover using CSS
</ h3 >
< div class = "imageContainer" >
< img src =
alt = "Image" >
< div class = "overlayelement" >
Welcome to GeeksforGeeks
</ div >
</ div >
</ body >
</ html >
|
CSS
.overlayelement {
position : absolute ;
top : 50 vh;
left : 35 vw;
font-size : 40px ;
font-weight : 700 ;
transition: transform 0.1 s ease-in-out;
}
.imageContainer:hover>.overlayelement {
transform: scale( 1.5 );
}
.imageContainer:hover>img {
transform: scale( 1.2 );
}
.imageContainer>img {
opacity: 0.7
}
.imageContainer {
height : 300px ;
width : 600px ;
align-self: center ;
}
img {
height : 300px ;
width : 600px ;
border : 5px solid rgb ( 72 , 33 , 108 );
border-radius: 30px ;
transition: transform 0.1 s ease-in-out;
}
body {
display : flex;
flex- direction : column;
text-align : center ;
justify- content : center ;
height : 100 vh;
gap: 50px ;
}
h 1 {
color : rgb ( 20 , 87 , 20 );
}
@media only screen and ( max-width : 1392px ) {
.overlayelement {
font-size : 30px ;
}
}
|
Output:
Share your thoughts in the comments
Please Login to comment...