How To Add Zoom Effect To Blogger Images

Posted by
If you are looking for something for your images like zooming on hover, then zoom effect is the best thing to add to your Blogger images. Zoom effect makes your blog attractive by making it's imaging zoom-in and zoom-out. Whenever the mouse is been placed on an image in your blog it zooms-in and when the mouse is placed out of the image it zooms-out. This feature looks cool!

On this post, I will show you on  How To Add Zoom Effect To Blogger Images.


Steps on How To Add Zoom Effect To Blogger Images

Here we have two types of Zoom Effects, Carefully touch these images below using your mouse and observe their zoom effects.

First Type Zoom Effect

Second Type Zoom Effect

How To Add The First Type Zoom Effect

Step 1: Go to Blogger Dashboard >> "Theme" >> click on the "Edit HTML" button.


Step 2: Click anywhere inside the HTML code area and press the CTRL + F keys to open the Blogger search box.


... type or paste the following tag into the search box and hit Enter to find it:
]]></b:skin>

Step 3: Now copy the code below and paste before it:
Just above ]]></b:skin> paste the code

Code:
.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;
}

Step 4: Click on Appy to Blog.

How To Activate The First Type Zoom Effect On Blogger Images

Once you are done with the coding, all you have to do is just simply follow these steps to activate the zoom effect to your blogger images.

Anytime you add or upload images in your blogger post, switch to HTML mode by clicking on the HTML Tab (which is located at the top left end of the blogger post after Compose). Change the class of your image from whatever it is to “zoomeffect”.

Example:
Your image class in post HTML might look like this: <div class=“seperator”, now change it to <div class=“zoomeffect”

Just in case you want to add it to any other part of your blog, you can use the following code:
<a class=”zoomeffect” href=“URL-OF-YOUR-IMAGE/” target=”_blank”>
<img src=“http://URL-OF-YOUR-IMAGE” /></a>

Replace URL-OF-YOUR-IMAGE with the link of the image you want to apply the effect to, Publish or Update Post and you are done!

How To Add The Second Type Zoom Effect

Step 1: Go to Blogger Dashboard >> Theme.


Step 2: Select Customize >> Advanced >> Add CSS.


Step 3: Now copy the code below and paste it there.

Code:
 .zoomeffect1 img:hover {
-o-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -webkit-transition: all 0.6s;
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -webkit-transform: scale(1.1);
}

Step 4: Click on Appy to Blog.

How To Activate The Second Type Zoom Effect On Blogger Images

Once you are done with the coding, all you have to do is just simply follow these steps to activate the second type zoom effect to your blogger images.

Anytime you add or upload images in your blogger post, switch to HTML mode by clicking on the HTML Tab (which is located at the top left end of the blogger post after Compose). Change the class of your image from whatever it is to “Zoomeffect1”.

Example:
Your image class in post HTML might look like this: <div class=“seperator”, now change it to <div class=“zoomeffect1”

Just in case you want to add it to any other part of your blog, you can use the following code:
<a class=”zoomeffect1” href=“URL-OF-YOUR-IMAGE/” target=”_blank”>
<img src=“http://URL-OF-YOUR-IMAGE” /></a>

Replace URL-OF-YOUR-IMAGE with the link of the image you want to apply the effect to, Publish or Update Post and you are done!

N.B: After pasting the CSS Code hit the enter key at the end of the code before applying to blog. If you would like to use the type I am using on my blog then use the first type zoom effect. Thanks!