I have shared lot's of tutorials on how to add different effect to images, but now, we will be talking on how to add zoom effect to images on mouse hover.
For a demo of what we are talking about, kindly hover your mouse cursor on the image below and see the awesome effect.
- Go to your blogger dashboard
- Click on Template > Edit HTML > Proceed
- Use ctrl F to find ]]></b:skin> and paste the following code above/before it.
margin: 0 10px 5px 0;
- Click on Save template
Whenever you have uploaded any image in your post editor, simply switch to HTML mode and change the class from what ever it is, to zoomeffect.
Example: Your image class in post editor will be <div class="seperator", now change it to <div class="zoomeffect"
If you are adding it to any other part on your blog, you can use the following code.
<a class="zoomeffect" href="YOUR-IMAGE-URL/" target="_blank">
<img src="http://YOUR-IMAGE-URL" /></a>
Replace YOUR-IMAGE-URL with the link of the image you want to apply the effect to.
*Please confirm the email sent to your inbox after clicking "Sign Up!".