Add CSS Image Morph Circular Effect To Blogger Image Posts

• Dear Reader,if you like this Article, feel free to comment on this post.Thanks

Hi Dude! This is our first post,I share this CSS coding with my best intrest.I see same effect on many blogs during my research.Suddenly,i have a great paln in my mind to prepared such a awesome CSS code for Blogger Learners.So.I make this Widget for You.Cheak this widget on your BLOG,and enjoy this mouse hover effect.

What is the Effect,How It Works?

The main feature is on hover images will spin and morph from square to round, to help this effect images will also have a 3D style.Below I have created an animated GIF to give you an idea of how it looks, check out the demo for the real thing (On the demo page hover over any of the images in the post)

Add CSS Morph Effect To Blogger!

Step1:Go to Blogger-Dashboard,Select TEMPLATE>Choose Customize>Click On ADVANCED tab>Select Add CSS

/* CSS Image Morph http://www.ourbloggerlearners.blogspot.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.ourbloggerlearners.blogspot.com */