Zoom In/Out Images On Mouse Hover With Single Image

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.

Here is a demo:

Live Demo

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

<style>
.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);
}
</style>
<a href="#" class="mbtzoom"><img  width="60px" height="60px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikiUzaR70eQDgIbkGfKElYqn7VmdyFasdQQOize3Y5HbmOrVgv_YWe5fEZJmwX1bc_hKMMffjfsypVs-W0Slr4V63aZwhYC3toIIZOChW01cCHj6SZrdkcKK0odFlHvd5yb52cvPB9Qdk/s800/rss-128.png" alt="back to top"  /></a>

Anims

About the Guest Author:

Anims is freelance web designer and enjoys playing around with and learning coding in his free time. He likes to write about Web Technologies such as HTML, CSS and SEO.

SHARES

Share

Pin it

Tweet

Share

Share

Print

Buffer

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

Mohammad 6/26/2011