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/AVvXsEhWazhVJ81mdaK4ppVAr23LpA84L7zPLhdNxtY0EJFF3Bj72xl7B6AgXTDZZy4dRWgccdp2myQnafl1pf0mhSHQB4xUA9c6lAp0QgSxD-HyOah4L4aBvUuWAzfzXCNRR-2FWgXlIEBNeFM/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.