CSS is really very powerful and useful tool today , We can different types of the effects to images , buttons and text on your Blog. It very easy and simple to implement on Blogger blogs. In the previous post we discussed about adding rollover effect to your images on your Blogger blog. Now we are going to discuss about adding zoom over effect to Blogger images .
Zoom hover effect means , when you hover you mouse cursor on an image , the image size will increase.
Zoom hover effect means , when you hover you mouse cursor on an image , the image size will increase.
1. Log in to Blogger
2. Now go to "Template"
3. Find next code (CTRL + F) ]]></b:skin> and just above him, add next 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;
}
Click on Save template
How To Activate On Images
Whenever you have uploaded any image in your post editor, simply switch to HTML mode and change the class from what ever it is, to zoomeffect.
Example: Your image class in post editor will be <div class="seperator", now change it to <div class="zoomeffect"
If you are adding it to any other part on your blog, you can use the following code.
<a class="zoomeffect" href="YOUR-IMAGE-URL/" target="_blank">
<img src="http://YOUR-IMAGE-URL"/></a>
Replace YOUR-IMAGE-URL with the link of the image you want to apply the effect to.
That's all!
