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.
Step 1: In the head section of your html template, include the below CSS Code.
<style>
.image {
margin-left:200px;
width:150px;
height:150px;
overflow:hidden;
cursor:pointer;
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);
opacity:0.8;
}
</style>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" /> </div>
[sc:demobuttons demolink=”http://demo.techglimpse.com/zoom-image-using-css3/” boxlink=”https://app.box.com/s/dqqy2yeqmedg8gyhjzn9″]
thanks buddy