Wednesday, 18 January 2017

How to Add Jquery Image Zoom Hover In Blogger

January 18, 2017 Leave a Reply

How to Add Jquery Image Zoom Hover in Blogger

Jquery Image Zoom Hover this is a html script .Friends today i m going to show a simple trick that how can you zoom image in your blogger.when you upload your image and they looked very small in size .But if you want to increase its size then no need to worry .Just follow a few step . Make able your image zoom.This is small CSS code just add this and make your photo zoom able.

Follow Below step to add add Jquery Image Zoom Hover on your blogger.

Now i m going to show you some easy steps to add this tag Jquery Image Zoom Hover.

First of all open your blogger dashboard
Go>Template >click on Edit HTML
After clicking a new page will open .This is code area .Click under code area
And press Ctrl + F from your keyboard .A small search box will open .
Now copy the below <b:skin> and past it in blogger search box and press enter to find the tag.
After Finding this tag.
Copy the below code and past upper /Above/before the <b:skin> tag .and click on Save template .

]]></b:skin>

Copy the code of Jquery Image Zoom Hover from here and past it upper /above this <b:skin> tag.

.zoomeffect img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}

.zoomeffect img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

After adding the upper code in your template . Now
Go>Post>click on Edit post
After clicking the post will open and click on HTML the html Section will open.
Replace the ''Sepatator '' with ''zoomeffect''
(''zoomeffect'' with separator in the tag .)

ORIGINAL image

<div class="separator" href="YOUR-IMAGE-URL/" target="_blank">
<img src="http://YOUR-IMAGE-URL"/></a>

Zoom Hover Effect image

<div class="zoomeffect" href="YOUR-IMAGE-URL/" target="_blank">
<img src="http://YOUR-IMAGE-URL"/></a>

REMEMBER :

If you want to zoom all photo then change this word ( separator ) in all image tag and past this word or type ( zoomeffect)

if you face any type problem in this post Jquery Image Zoom Hover or related with your blog . then contact us we will solve your problem as soon as soon is possible.that is very gladness for me to do your task.