How To Add Tilt Image Effect To Blogger Images? - Helper Blogger

Blogger Widgets | Templates | Tutorials


Monday, 30 April 2012

How To Add Tilt Image Effect To Blogger Images?

Images plays great role in blogger,with using images you can speak mind or you can tell what is your article is about.Today we are sharing another cool CSS hack.In this hack we will rotate blogger images some degrees and when any visitor hovers on image the image will return back to normal position,this effect attracts anyone.We will apply this hack with using a small snippets of CSS code.So without waiting anymore let's go to the tutorial :

Tilt Image Effect Demo ▼

How To Add Tilt Image Effect To Blogger

  1. First Go to your Blogger Dashboard > Design > Edit HTML.
  2. Download a copy of your template.
  3. Now find for below code in your template.


add below piece of code just above of above code

.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);

Now save your template and you are done....

I hope you will like this little hack.Post your coomets and queries below in comment box.


  1. amazing Effect

    thanks Friend

  2. thnx man, even my blog has the same template and my name is also rahul

  3. I was looking for some Dissertation Experts for writing dissertation and but some quality content.


If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM