HackingUniversity - Hacks . Tricks . How-To's

03 May 2014

How to Add Tilt Image Effect on Blogger Post Images

Tilt image effect for blogger post images will tilt your images to a particular direction and tilt them again when you mouse over those images. Well this is just for adding some motion to those image so that your readers enjoy that cool effect. So now you can see the effect demo below for the images you are going to get on your images.

tilt image effect blogger

So now 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 Blogger.com 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. .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, hover over them and see them rotate.
  5. Well now there is another awesome image rotation effect you could use, just replace the above code with the below code and see another effect.

    .post img:hover{-moz-box-shadow:0 0 20px red;-moz-transform:scale(1.2) rotate(-350deg);-ms-transform:scale(1.2) rotate(-350deg);-o-transform:scale(1.2) rotate(-350deg);-webkit-box-shadow:0 0 20px red;-webkit-transform:scale(1.2) rotate(-350deg);box-shadow:0 0 20px red;transform:scale(1.2) rotate(-350deg)}

  6. So now save your template and see this effect live.

So guys now we have successfully added these awesome effects in your blogger blog, well hope these effects looks great on your blog and make's your images more attractive when hovered over, if you face any problem do comment.