Adding CSS Morph Effect To Images On Mouse Hover

Images are one among the best ways to make a blog more attractive. In addition if you have an awesome hover effect added to your image then it will be more impressive. In our previous tutorials we have already discussed about rotate effect and zoom effect. Today we are here with another awesome hover effect, i.e. CSS Morph Effect. After you add morph effect to an image, while the mouse hovers over that image it starts rotating and it morphs into a circle as it rotates. The effect is purely a CSS effect and jQuery is never used. Now let's move on to the demo. Just hover your mouse over the below image to see the demo.

Demo

Adding CSS Morph Effect To Images

1) Go To Your Blogger Dashboard Click > Template > Edit HTML > Proceed:

2) Using Ctrl+F Search For ]]></b:skin> and just below it paste the following Code:

.TYBmorph {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.TYBmorph:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

3) Click on "Save template" button!

4) Now when you want to apply rotate effect for an image use the below code

<a class="TYBMorph" href="IMAGE-URL" target="_blank"><img src="IMAGE-URL" /></a>

Note:

1) Replace "IMAGE-URL" with the URL of the image!

That's it! Now enjoy the morph effect for the images on your blog! Feel free to share your opinions through the comment box below!