A few days ago, I posted How to add CSS auto zoom effect to post images on blogger. Now I am continuing with image effects this time with something really awesome. Adding image morph effect to blogger blog is quiet easy even beginners can easily add this amazing effect by following some simple steps.
What's New In This Effect?
The main feature of image morph effect is on hover, images will spin and morph from square to circle. This effect has complete 3D style look. By clicking on the below link you can see live demo of image morph effect.
How To Add CSS Image Morph Effect To Blogger Blog
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 Morph http://www.makesomesense.com */
.post img{border:10px solid #fff;overflow:hidden;-webkit-box-shadow:5px 5px 5px #111;box-shadow:5px 5px 5px #111;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;-ms-transition:all .5s ease;transition:all .5s ease;margin:20px}
.post img:hover{border-radius:50%;-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
/* CSS Image Morph 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