Zoom In/Out Images On Mouse Hover With Single Image


zoom-imagesThere 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="http://3.bp.blogspot.com/_7wsQzULWIwo/SmofuiB8WDI/AAAAAAAABjg/brSrpcfyBf0/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.

Need Quick Help within 24 Hours? ASK NOW



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 »

12 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. This one is great, but I hope you've got the one that doesn't require HTML Implementation, it's hard to edit all the photos I've come up with. Hope you can make one that is direct, I mean only requires HTML as like to other plugins! Thank you!

    P.S. I've used most of the great widgets you got here, great tutorials and many thanks to that!

    Edward Roberts Jr.
    www.famousdestination.com

    ReplyDelete
  2. @EdwardRobertsJr

    To use this on every image in your blog, simply use this code :

    img {
    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;
    }

    img:hover {
    zoom: 2;
    text-enlarge: 2;
    -moz-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
    }

    ReplyDelete
  3. live demo link error!!
    meanwhile I'm using expando to zoom effect! :D

    ReplyDelete
  4. demo link is not working
    kindly solve this

    ReplyDelete
  5. Please Correct the Live Demo Link :)

    ReplyDelete
  6. Hey put a class to it like'.mbtzoom' instead of '#mbtzoom' because people may use this effect more than once in a single page...

    ReplyDelete
  7. @EdwardRobertsJr thanks buddy! But is this for blogger? and which codes on top do i have to replace for the codes you have provided? Thanks for the help!

    ReplyDelete
  8. @Edward

    Curry007 is right. In order to add this effect to all images automatically which I don;t recommend is to use the code provided with him with one correction though:

    .post img {
    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;
    }

    .post img:hover {
    zoom: 2;
    text-enlarge: 2;
    -moz-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
    }


    Shortcut: Whenever you want to add the zoom effect then simply add this before href and after <a like this,
    <a class="mbtzoom" href="
    you will find the link tag i.e <a href on all images in HTML mode.

    PS: Its a pleasure that you like most of the tutorials brother. :)

    @Curry007

    Thanks for helping out others. :>

    @wayans and @fahad @sam
    Sorry for the inconvenience I have updated the link.

    @amit
    you are right buddy I just corrected anims code.

    @news
    PAste the code in the bottom in MBt HTML Editor.

    @Rob
    I have answered that in my comment at the top.

    ReplyDelete
  9. Hi! Thanks for this great workaround. Everything looks great in Firefox, but in Safari and Chrome the zoom/hover effect is very jumpy. Is that a known issue? Here's my sample site I'm using the code on.
    http://lwassociatestemp.blogspot.com/p/shaari-horowitz.html

    Any ideas? Thanks!

    ReplyDelete
  10. live demo not working! Please fix this!

    ReplyDelete
  11. hi mohammad, here is the code for one my images.
    <a href="http://backbenchtalk.blogspot.com/2013/01/Fried-Green-Beans.html" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="141" src="http://2.bp.blogspot.com/-km-SMv2E2Xc/UPp7rezZw5I/AAAAAAAAAsY/nJSpVZyWIA4/s200/dire_greenbeans_h.jpg" width="200" />

    could not obtain the results you explained with the above method..i want to apply this effect selectively. plz help

    ReplyDelete