Zoom In/Out Images On Mouse Hover With Single Image!

SHARE:

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

1. CSS implementation

1. HTML Implementation

CSS implementation:
]]></b:skin>
HTML Implementation:

• 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"

DEMO

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. Go To Blogger > Design > Edit HTML
2. and search for

3. Now right above it, paste this code:

/*------- MMK ZOOM-OUT ZOOM-IN -------*/

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

.MMKzoom: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.

Now whenever you wish to apply the zoom effect to any image you want simply use this code,

<a href="URL OF PAGE" class="MMKzoom"><img  width="60px" height="60px"src="IMAGE LINK" alt="back to top"  /></a>

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

As a DEMO simply paste this code on MMK HTML Editor

<style>
.MMKzoom {
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;
}

.MMKzoom:hover  {
  zoom: 2;
  text-enlarge: 2;
  -moz-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
}
</style>

<a href="#" class="MMKtzoom"><img  width="60px" height="60px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYg-9PtX-RJv9VNPH-gagNYHrdWoBlaLMMVDMqxJE8bJ55v2ZyA7ShVAjxHqjnUn8XQuBp0FstBrjRUaTxeDtOuGHpN7N_u8FReMfBvQ7YeRDDNgjlmgnAikg0EW7dVzlVI-swBqjzHXs/s800/rss-128.png" alt="back to top"  /></a>

SHARE: