Zoom an image inside a div on hover using CSS3 only

How many of us would have used Google+ and tried searching friends and like minded people for networking? For a non-developer, the notion would be to just make a network of friends. But a developer would closely look at the designs and transitions used on any webpage. One such thing which I noticed in G+ was the on-hover the image zooms.

Are you wondering how it could be done? And guess it would require Jquery or javascript? No, these are just CSS3 transition effects. All modern browsers support this feature and why shall we not use it? Ofcourse, it doesn’t affect the performance of your webpage! With no more delay, lets get coding.

Google Friends Page

Step 1: In the head section of your html template, include the below CSS Code.

.image {
display: inline-block;
background: rgb(109, 109, 109);
padding: 0;
.image > img {
-webkit-transition:all 100ms linear;
-moz-transition:all 100ms linear;
-o-transition:all 100ms linear;
-ms-transition:all 100ms linear;
transition:all 100ms linear;

.image > img:hover {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);

Step 2: Put image from your gallery and display on a div on hover shows the zoom effect using CSS3.

<div class="image">
<img src="http://stars.topnews.in/sites/default/files/imagecache/preview/images/miley-cyrus-42.jpg" width="150" height="150" />

Topics :

vps germany

Get Free Email Updates

Disclaimer: The content published in this article is the views of the author only. Techglimpse does not gurantee accuracy, completness or validity. If you believe the content on this post violates your copyright, please send us a mail for removal. Read more.