How to add rotate image effect to images on Blogger?

Adding some effects to the blog make the visitors happy. Here I have posted one of the cool effect in which the image will get rotated when the mouse is hovered on the image. You just need to place the specific code provided below and finally you will ready to go.

How to add rotate image effect to images on Blogger?

Steps you have to perform

• Login with your Blogger account.
• Select the blog for which you want to activate the effect. Navigate to template section and click on "Edit HTML"
• Click on box, Press "Ctrl + F" and search for "]]></b:skin>".
• Paste the below code just above it.

.post img {-webkit-transition: -webkit-transform .15s linear;-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);padding: 5px 5px 5px 5px;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg)}
.post img:hover {-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);-webkit-transform: rotate(-3deg);-moz-transform: rotate(-3deg)}

4. Save your template and refresh your blog to see this effect live on all your post images. It will also work for the thumbnails from home page.

Tweaks and tips:

• To rotate the image to right, just change -3deg with +3deg . (Note down that -ve value is to rotate the image to left and +ve value is to rotate image to right)
• Change 3 to any number to rotate with specific degrees. E.g. 5deg or -6deg.
• To show images rotated already before hovering the mouse on image, just change 0deg to any value you want. Such as -3deg or +5deg.