Get Latest Tricks Alert Daily
Follow Readers

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


SHARE:


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




SHARE:



If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to our regular Email Updates!

Subscribe To Get Latest Tricks On Email!

 

2 comments: