How To Create Image Zoom Effect Using CSS3 Transitions

 

Hover effects are really exciting and fun topics. In the previous tutorials, we’ve already built image grayscale effect with CSS. In this post, I’ll share code snippets to create a simple and easy to use image zoom effect.

In this example, I’ve written the code in such a way that when a user hovers over the image, the photo enlarges while still staying within the boundaries of div element.

HTML: 

<div class="photo">
	<img src="image.jpg" alt="Image" />
</div>

As you can see, we’ve wrapped the image within a div element with class .photo. The image is of 500px X 500px dimensions.

CSS:

.photo{
	width: 350px;
	height: 350px;
	overflow: hidden;
}
.photo img{
	width: 100%;
	height: 100%;
	-webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
        -ms-transition: all 1s ease;
        transition: all 1s ease;
}
.photo:hover img{
        -webkit-transform:scale(1.2);
        -moz-transform:scale(1.2);
        -ms-transform:scale(1.2);
        -o-transform:scale(1.2);
        transform:scale(1.2);
}

We are apply height and width of 350 pixels to the container div and making overflow to hidden. Also the height and width of image is set to 100%.

Whenever a user hovers over the image, transform property enlarges the image.

 

0 Comments

Leave a Comment.