Add An Amazing Image Morph Effect To Post Images On Blogger


In the last post we had a CSS Zoom effect for images on your blog.Now we are continuing with image effects this time with something really awesome.This effect has a number of layers but as with all our tutorials it can be easily added to your blog even for a newbie.

So what is the effect ? 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).

View Demo Button

Add Css Image Morph Effect To Blogger

Step 1. - In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Customize > Advanced > Add Css, as shown in the video below.

Step 2. Copy and Paste the following code into the Css Section then click Apply To Blog.
(Note : Some people have found the "Apply To Blog" button can not be clicked if so after the code click space)

/* CSS Image Morph */
.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 */

That's it Check out your blog and the effect will be in place.

Drop your comments and questions below.

AuthorAuthor - Paul Crowe is the owner and main author of Spice Up Your Blog.Paul lives in Ireland, has been blogging since 2006 and writing Spice Up Your Blog since 2009.You can find him in the usual social networks.

Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative

If You Enjoyed This Post Please Take 5 Seconds To Share It.


  1. Yet another great widget I guess. The images with morph effect looks really cool.

    1. Thanks Mark it does look very cool If I do say so myself :)

  2. Thanks for sharing a great post. I would love to try this amazing morph effect image.

  3. The above demo of morph effect is really cool and I hope it can work on my wordpress blog too.

    1. Vicky if you add the code to your WordPress style sheet or a sidebar text gadget wrapped in style tags.Then you will need to find the image class on the blog and change ".post image" to that class.

  4. nice widget i will try it to my blog


Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.

Hire Us