CSS Image Zoom On Hover Inside a div

This code enables CSS image zoom on hover inside a specified div. It scales images on mouseover, creating a zoom-in effect. The ‘zoom’ class triggers a 1.2x magnification, while the ‘small’ class resets the image to its original size on hover. The transition effect gives a smooth visual change, making it useful for showcasing details upon hovering over images inside designated div containers.

How to Create Image Zoom On Hover Inside a div Using CSS

1. First, create the HTML structure where you want to implement the image zoom effect. Make sure to include the necessary HTML tags for your images. In the provided code, we use div containers and images with specific classes. You can customize this part to fit your website’s layout.

<h4>Zoom effect on hover - bigger scale</h4>

<div class="zoom">
       <img src="https://cdn.pixabay.com/photo/2016/09/26/20/10/grapes-1696921__340.jpg" alt="zoom" width="300" height="300" class="alignleft size-medium wp-image-7000" />
 
</div>
<div class="zoom">
  <img src="https://cdn.pixabay.com/photo/2016/10/26/09/19/arbutus-1771003__340.jpg" alt="zoom" width="300" height="300" class="alignleft size-medium wp-image-7000" />
</div>  
<h4>zoom effect on hover to normal</h4>
<div class="small">
       <img src="https://cdn.pixabay.com/photo/2016/09/26/20/10/grapes-1696921__340.jpg" alt="small" width="300" height="300" class="alignleft size-medium wp-image-7000" />
 
</div>
<div class="small">
  <img src="https://cdn.pixabay.com/photo/2016/10/26/09/19/arbutus-1771003__340.jpg" alt="small" width="300" height="300" class="alignleft size-medium wp-image-7000" />
</div>

2. Now, let’s apply the CSS styles to create the zoom effect. The following code includes the necessary CSS styles. You can use this code directly, or you can customize it to match your website’s design. The CSS defines two classes: “zoom” and “small,” each with specific styling properties for the images.

h4{
    clear: both;
    margin-top: 20px;
}

.zoom, .small{
    overflow: hidden;
    padding: 0;
    width: 300px;
    height: 300px;
    border:1px solid #000;
    float:left;
    margin:10px;
}
.zoom img {
    transition-duration: 4s;
    margin: 0 auto;
    display: block;
}
.zoom img:hover {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    z-index: 0;
}
.small img{
  transition-duration: 4s;
    margin: 0 auto;
    display: block;
  transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
}
.small img:hover {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    z-index: 0;
}

The “zoom” class is used to define the images that will enlarge on hover. The transform: scale(1.2); property enlarges the image by 1.2 times when the mouse hovers over it.

The “small” class is used for the images that return to their normal size when hovered. The transform: scale(1); property ensures the image returns to its original size.

That’s all! hopefully, you have successfully created image zoom on hover using CSS. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.