How to Add Zoom Effect to Images
Step 1. Log in to your Blogger Dashboard
Step 2. Go to Template >> Click on Edit HTML and search (Ctrl + F) for the Following Tag
]]></b:skin>
Step 3. Copy the Below code and Paste it just above/before the ]]></b:skin> tag
.zoomeffect img{
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-o-transform:scale(0.9);
-webkit-transition-duration: 1.0s;
-moz-transition-duration: 1.0s;
-o-transition-duration: 1.0s;
opacity: 0.8;
margin: 0 10px 5px 0;
}
.zoomeffect img:hover{
-webkit-transform:scale(1.0);
-moz-transform:scale(1.0);
-o-transform:scale(1.0);
opacity: 1;
}
Step 4. Click on the Save Template button
How to Use this Effect on Images
To use this effect in your posts then in the post editor after uploading your image switch to HTML look for the image class. The default image class is <div class="separator". Now replace the separator to zoom effect in the post editor and you're done.
<a class="zoomeffect" href="IMAGE-URL" target="_blank"><img src="IMAGE-URL" /></a>
Post a Comment