There are many ways you can add special effects to your web pages and one of them is adding a Zoom Effect on Images when the user hovers over them.This type of effect is notably used in portfolio-type situations where the design intends to show both visual and informational details. It can be created using jQuery plugins.
This piece of code is done using a scale transform CSS property. Using the scale value within the transform property allows you to change the appeared size of an element. The default scale value is 1, therefore any value between .99 and .01 makes an element appear smaller while any value greater than or equal to 1.01 makes an element appear larger. We have used scale property values 1 and 1.5.
Here, we have created a simple image zoom-in/out effect with CSS that is very useful for the best Website Design company. We have here two different situations. In the first one, the images are scaled with value 1 initially which gets zoomed-in on hover of the image scaled to 1.5. The second demo is the opposite of the first demo. It is zoomed in initially with the value of 1.5 and gets zoomed out on the hover of the image. This effect could be used in photography websites or image galleries. We have created an image gallery to show the required effect. Below is the code used to implement the concept.
1. Zoom-in Effect :
HTML:
<div class="zoom-wrap"> <div class="zoom-effect"> <h1>Photo Zoom In Effect</h1> <div class="photo-wrap"> <img src="images/images.jpg" alt="picture1"> </div> <div class="photo-wrap"> <img src="images/student-image-2.jpg" alt="picture2"> </div> <div class="photo-wrap"> <img src="images/garden.jpg" alt="picture3"> </div> <div class="photo-wrap"> <img src="images/download (1).jpg" alt="picture4"> </div> <div class="photo-wrap"> <img src="images/game9.png" alt="picture5"> </div> <div class="photo-wrap"> <img src="images/images (1).jpg" alt="picture6"> </div> <div class="photo-wrap"> <img src="images/game7.png" alt="picture4"> </div> <div class="photo-wrap"> <img src="images/download (3).jpg" alt="picture5"> </div> <div class="photo-wrap"> <img src="images/natural.jpg" alt="picture6"> </div> </div> </div>CSS: .zoom-wrap { display: block; max-width: 1000px; width: 100%; margin: 0 auto; } .zoom-wrap .zoom-effect { display: inline-block; width: 100%; margin: 20px auto; } .zoom-wrap .zoom-effect .photo-wrap { float: left; height: 200px; width: 33.33%; overflow: hidden; } .zoom-wrap .zoom-effect .photo-wrap img { width: 100%; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); -webkit-transition: all .5s ease 0s; -moz-transition: all .5s ease 0s; transition: all .5s ease 0s; opacity: .7; } .zoom-wrap .zoom-effect .photo-wrap:hover img { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); transform: scale(1.5); opacity: 1; }Snapshot of the zoom-in effect:
Initial view of images
Zoom in effect ( On Hover )
2. Zoom-out Effect:
HTML: <div class="zoom-wrap"> <div class="zoom-effect reverse"> <h1>Photo Zoom Out Effect</h1> <div class="photo-wrap"> <img src="images/images.jpg" alt="picture1"> </div> <div class="photo-wrap"> <img src="images/student-image-2.jpg" alt="picture2"> </div> <div class="photo-wrap"> <img src="images/garden.jpg" alt="picture3"> </div> <div class="photo-wrap"> <img src="images/download (1).jpg" alt="picture4"> </div> <div class="photo-wrap"> <img src="images/game9.png" alt="picture5"> </div> <div class="photo-wrap"> <img src="images/images (1).jpg" alt="picture6"> </div> <div class="photo-wrap"> <img src="images/game7.png" alt="picture4"> </div> <div class="photo-wrap"> <img src="images/download (3).jpg" alt="picture5"> </div> <div class="photo-wrap"> <img src="images/natural.jpg" alt="picture6"> </div> </div> </div>CSS: .zoom-wrap { display: block; max-width: 1000px; width: 100%; margin: 0 auto; } .zoom-wrap .zoom-effect { display: inline-block; width: 100%; margin: 20px auto; } .zoom-wrap .reverse .photo-wrap img { -webkit-transform: scale(1.3); -moz-transform: scale(1.5); transform: scale(1.5); } .zoom-wrap .reverse .photo-wrap:hover img { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); }Snapshot of the zoom-out effect:
Initial view of images
Zoom out effect view( On Hover )
Browser support: Most of the CSS3 properties are supported in all kinds of browsers. Below shows the list of browsers which support the above piece of codes.
- IE
- Edge
- Firefox
- Chrome
- Safari
- Opera
