OK, so today i am going to share another post and today post is related to Advance CSS effect that how to add CSS auto zoom effect to post images on blogger blog. Every blogger and webmaster wants something unique in their site/blog for this you have to change something so that you can easily attract visitors. Due to the advancement of CSS code we can now use better effects in blogger. Even beginners can easily use CSS code. For adding this effect you have to add only one CSS code to blogger and can see auto zoom effect to post images.
Whenever you move mouse cursor towards post images it will automatically give a zooming effect which looks cool and unique. To know how to add CSS auto zoom effect to post images just follow the below steps.
How To Add CSS Auto Zoom Effect To Post Images On Blogger
1. Login to Blogger.com
2. Go to Dashboard.
3. Click on "Template Section".
4. Click on "Customize"
5. Click on Advanced > Add CSS
6. Copy the below code in CSS Section
/* CSS image zoom effect http://www.makesomesense.com */
.post img {
height: 100%;
width: 100%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post img:hover {
width: 150%;
height: 150%;
}
/*CSS image zoom effect http://www.makesomesense.com */
7. Click "Apply Blog" to save settings
That's it your work done.
Enjoy Blogging!
0 blogger-disqus:
Post a Comment