How to create a zoom effect of images with mouse hover on Blogger? Sometimes due to space constraints in the blog, we are forced to put small images which become difficult for the visitors to know what the image is about.Today we will see how to tackle this problem with a beautiful code which makes the picture to zoom out when you hover the mouse over it.Let’s see the steps now:
Note: Before trying this method on your Blogger blog, please take some time to back up your current template. Design > Edit HTML > Download the template.
Step 1. Go to Design > Edit HTML.
Step 2. Ctrl+F to find ]]></b:skin>
Just above ]]></b:skin> paste the following code:
Step 3. Now, where ever you want the image to appear(post, sidebar using HTML gadget, or top). Paste the following code in the HTML section of the Post:
Enjoy the DEMO
Look for Post Title with “IMAGE ZOOM”
Green Colour code – To change the postition of Zoom/pop up.