How to Add [Tilt] Image Effects on Blogger Post


Tilting Image on your blogger post to one direction is another new CSS coding that is useful on your post.You can make your image tilt to a particular direction and tilt them again when mouse is been move over on such image. This is just for you to add some motion to those images to make sure that the readers enjoy the effect.

So, how you can achieve this effect on your blogger images? is explained below so follow the steps and enjoy this cool effect.

1. Go to and Sign In to your account.

2. Now choose your Blog and Navigate to Template > Edit HTML.

3. Now find out ]]></b:skin> and paste below code right above it.

<!-- Tilt images ~ -->
    .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(+2deg);-moz-transform: rotate(+2deg)}

    .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(-1deg);-moz-transform: rotate(-1deg)}

4. Now save your template and refresh your blog to see this effect live on all your post images.

Good Luck...


Are you confused or just want to tell us you visited? Feel free to comment

Your feedback is always appreciated. I will try to reply to your queries as soon as time allows.

Thinking of spamming here?:
Please do not spam Spam comments will be deleted immediately upon our review. So why waste your time?


Kindly use this button below to get this my article on your computer:

Print Friendly and PDF

You can also read this Related Posts

Best Blogger Tips

Post a Comment

Join me on Facebook Follow me on Twitter Follow me on Digg Follow on BlogCatalog Follow me on MySpace Subscribe to RSS Email me