Wednesday, August 10, 2011

Zoom In/Out Images On Mouse Hover With Single Image

0 comments

zoom-images 
There are many tutorials online which show users how to achieve a hover effect on their buttons and other images using mouse hover and they often instruct to use a second, larger image.  Another method used is using jQuery to enlarge the size of the image. But with a little bit of trickery, this can be done solely using Css3 and normal html.

Note : This trick is best viewed in the latest version of any browser other than IE.
This tutorial has been split into two parts:
  1. CSS implementation
  2. HTML Implementation

CSS implementation:

1. Go To Blogger > Design > Edit HTML
2. and search for

]]></b:skin>
3. Now right above it, paste this code:


/*------- MBT ZOOM-OUT ZOOM-IN -------*/

.mbtzoom {
padding:5px;
position:fixed;
bottom: 35px;
right:10px;
cursor: pointer;
text-decoration: none;
border: 0px solid transparent;
-moz-transition: all 0.3s ease-out; 
-o-transition: all 0.3s ease-out; 
-webkit-transition: all 0.3s ease-out; 
-ms-transition: all 0.3s ease-out; 
transition: all 0.3s ease-out; 
}

.mbtzoom:hover  {
  zoom: 2;
  text-enlarge: 2;
  -moz-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
} 
Same procedure as the other option, edit the values to your picture, and change the zoom to how big you want the picture after the transition.

HTML Implementation:

Now whenever you wish to apply the zoom effect to any image you want simply use this code,
<a href="URL OF PAGE" class="mbtzoom"><img  width="60px" height="60px" src="IMAGE LINK" alt="back to top"  /></a>
  • Replace URL OF PAGE with the page link. On clicking the image the user will be taken to that page
  • Replace IMAGE LINK with the link of the picture
  • Make sure to Keep width and height equal to half the size of original image. For example if the image size is 100px by 100px then set width="50px" and height="50px"

That’s it! Your image should be zooming/enlarging beautifully on your blog/website!

DEMO

As a DEMO simply paste this code on MBT HTML Editor


back to top

0 comments:

Post a Comment

Followers

Blogumulus by Roy Tanck and Amanda Fazani
Free Blogger Tips, Hacks, Widgets, Templates and more