How to Add Tilt Image Effect to Blogger Post Images

Tilt effect refers to the movement of an image when someone hovers their mouse over it. It adds a dynamic touch to the image and is commonly used as an image effect. Apart from tilt, there are other image effects available, such as rollover, zoom, and tilt. In previous posts, we have already discussed rollover and zoom image effects. Adding a tilt effect to your images is similarly straightforward. Here, I will explain how to add a tilt image effect to your Blogger images.

How to Add Tilt Image Effect to Your Blogger Post Images:

Just add a small CSS code to your Blogger template to apply the tilt effect to your Blogger images. It is simple to add the CSS code for the tilt image effect in your Blogger template. Below, you will find a step-by-step procedure to apply the tilt effect.

Follow below steps to add tilt effect to your Blogger blog post images :

Step 1 : Go to Blogger Dashboard

Step 2 : Click on Template and click on Edit HTML

Step 3 : Search for ]]></b:skin>  in your template code

Step 4 : Add the following code just above ]]></b:skin>

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

Step 5 : Click on save template.

Through this method, you can apply the tilt effect to all images in your Blogger blog posts.