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

In the previous post, we discussed how to add a tilt effect to all images in your Blogger posts. With that method, the tilt effect will be applied to all the images in your blog posts on Blogger. However, if you want to apply the tilt effect to a specific image in a blog post, this post will guide you through the process.

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

The CSS code for adding a tilt effect to both all images in your blog post and a specific image is the same. The only difference is where you apply the CSS code. Instead of adding it to the Blogger template, you need to add the tilt effect CSS code directly to the specific blog post where you want the effect to be applied.

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 the image in your blog post. There, you will see a <div class="seperator"........> tag just above your image code. 

Add the following code just above the <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.