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 blogger 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
So, let's start
ORIGINAL IMAGE
First Type Zoom Effect :
How To add First Zoom Effect in blogger images?
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 for 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".
Second Type Zoom Effect
How To Use Second Zoom Effect to image?
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 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 "Zoom effect 1".
Note: What if your image do not have Class in html?
Add Class="zoomeffect1" before the image href tag of image.
Also, Check
