Add a Zoom/Spectacular jQuery Inner Zoom Effect to an image in Blogger

You might have seen various types of zoom effect on some blogs but this type of zoom effect is amazing. This zoom effect appears inside the image. When someone hovers the mouse over the image the then the image zoom effect is appear in the image internally. You need a HD image if you want to see zoom effect deeply. Now this tutorial will show How To Add a Zoom/Spectacular jQuery Inner Zoom Effect to an image in Blogger

Zoom Effect To An Image Demo

Live Demo

How To Add  Zoom/Spectacular jQuery Inner Zoom Effect to an image to blogger

• Go to Blogger Dashboard 
• Click on DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed --> Expand Widget Templates
• Press Ctrl + F and search the code shown below

</head>

• Now Paste the Code shown below just before/above it

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
<script src='http://js.howtouses.com/blogger/imagezoomeffect.js' type='text/javascript'/>

Now How To Add Zoom Effect

• To Add This Effect You Have To Add This Code To The Image

class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2"

In a regular image it would look like this

<a class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfxLd5zRuwIH15MHxwE5HJCIl0PsH17IvT5tdgweBjvurOjsSHz3xvcA1xbXPgWm2QJDl_s3A07cGpe4FbR4CSv9VNxNOgyfyPLxAsub4HtD5Kx0q8dNRTl509cQrjO-AdB0Cc7BY3hPw/s1600/large.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfxLd5zRuwIH15MHxwE5HJCIl0PsH17IvT5tdgweBjvurOjsSHz3xvcA1xbXPgWm2QJDl_s3A07cGpe4FbR4CSv9VNxNOgyfyPLxAsub4HtD5Kx0q8dNRTl509cQrjO-AdB0Cc7BY3hPw/s1600/large.jpg"/></a>

And for blogger image it would look like this

<div class="separator" style="clear: both; text-align: center;"><a class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBOcZT3Ctc_2fyBpAgZJG60oRBUsePspMWeH5zE-CkS6pGGd3l4jlZ1FJ0kEU4gRUq72yHb2U4XtHbGxEJes7Z9TwwZ60gLet5xisf9mA11xdGXEptdubFbX7AMkbQBCs1CTSqEbpaFdI/s1600/best-nature-full-hd-wallpapers-17.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBOcZT3Ctc_2fyBpAgZJG60oRBUsePspMWeH5zE-CkS6pGGd3l4jlZ1FJ0kEU4gRUq72yHb2U4XtHbGxEJes7Z9TwwZ60gLet5xisf9mA11xdGXEptdubFbX7AMkbQBCs1CTSqEbpaFdI/s1600/best-nature-full-hd-wallpapers-17.jpg"/></a></div>

Like it? Share it.