How To Add Zoom Effect To Blogger Images

How To Add Zoom Effect To Blogger Images

To make your blog more attractive there are many ways out there but the image hovering effect or image zoom effect is best of them.By adding zoom effect to your images your blogger will look more classy.I will discuss two types of zoom effect today to make your blog more attractive.
So, let's start

ORIGINAL IMAGE
Add Zoom Effect To Blogger Images

First Type Zoom Effect :
Add Zoom Effect To Blogger Images

How To Use First Zoom Effect?

Step 1:  Sign in to your blogger account. Go To Templates>Customise>Advanced>add CSS.

Step 2: Copy Below Codes, press Enter Once and Apply to Blog.

.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 3: To activate first type of zoom effect to your blogger images.Just go to the post whose image effect you want to change, switch to HTML mode. Change the class of your image to "Zoomeffect".

Add Zoom Effect To Blogger Images

Second Type Zoom Effect
Add Zoom Effect To Blogger Images

How To Use Second Zoom Effect?

Step 1:  Sign in to your blogger account. Go To Templates>Customise>Advanced>add CSS.

Step 2: Copy Below Codes, press Enter Once and Apply to Blog.

.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 3: To activate first type of zoom effect to your blogger images.Just go to the post whose image effect you want to change, switch to HTML mode.Change the class of your image to "Zoomeffect1".

Note: What if your image do not have Class in html?

Add Class="zoomeffect1" before the image href tag of image.

Also, Check

No comments:

Post a Comment