DNS Technology Consultants, Inc.

CSS Zooming Image on Hover

Here is a quick way to add a little element of surprise to a website for those who are viewing it on on a computer with a mouse, or even just select the image. What it will do is zoom in the image within the confines of the container. So if you have multiple images and move the mouse across them, it will give the impression of them popping off the page.


 <div class="thumbnail">  
   <div class="image">  
     <img src="URL" alt="Some awesome text"/>  


 .thumbnail {  
   width: 320px;  
   height: 240px;  
 .image {  
   width: 100%;  
   height: 100%;    
   overflow; hidden;  
 .image img {  
   -webkit-transition: all 1s ease; /* Safari and Chrome */  
   -moz-transition: all 1s ease; /* Firefox */  
   -ms-transition: all 1s ease; /* IE 9 */  
   -o-transition: all 1s ease; /* Opera */  
   transition: all 1s ease;  
 .image:hover img {  
   -webkit-transform:scale(1.25); /* Safari and Chrome */  
   -moz-transform:scale(1.25); /* Firefox */  
   -ms-transform:scale(1.25); /* IE 9 */  
   -o-transform:scale(1.25); /* Opera */  

The overflow: hidden; under the .image is what makes the zoom stay within the container. If you would like the image to zoom out past the container, simply remove that line.

Copyright © 2021, DNS Technology Consultants, Inc.
all rights reserved