How to Add Tilt Image Effect to Particular Image on Your Blogger Post

In previous post we discussed about adding tilt effect to all images of your Blogger posts. With that method , tilt effect will apply to all your blog post images on Blogger. You can also apply tilt effect to specific blog post image on your Blogger. If you want to apply tilt effect to particular blog post image , this post will help you.

How to add tilt effect to specific image of your Blogger blog post :

The CSS code is same , both for adding tilt effect to all image blog post images and adding tilt effect to specific image of your blog post. The difference is instead of adding the CSS code to Blogger template , we need to add tilt effect CSS code code Blog post.

Follow below steps to add tilt effect to your blog post image :

Step 1 : Go to Blogger Dashboard

Step 2 : Click on Posts and click on Edit post

Step 3 : Switch to HTML mode by simply click on HTML button on your Post editor

Step 4 : Search for image , There you see

<div class="seperator" ..   tag just above your image code

Add below code just above <div> tag

<style>
.Tilt 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(-5deg);
}

</style>

And Finally replace seperator with Tilt on your div tag

Step 5 : Click on Update to update your post.

Now check the tilt effect on your blog post image.