How to Add Tilt Image Effect to Blogger Post Images

Tilt effect means , when some one mouse hover on image images , it will just move to particular direction. This one of the image effect generally people can use. There are more image effects are there like rollover , zoom and tilt. In the previous posts we already discussed about rollover image effect and zoom effect. Like rollover and zoom effect , adding tilt effect to your images is easy . Here I'm explaining how to add tilt image effect to your Blogger image.

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

Just add small CSS code your Blogger template code to apply tilt effect to your Blogger images. It simple to add CSS code to Blogger template for tilt image effect. Below you can get step by step procedure to apply 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 below 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 tilt effect to all images of your Blogger blog posts.


No comments:

Post a Comment