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.

]]></b:skin>

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.

Post a Comment

  1. amazing Effect

    thanks Friend

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

    ReplyDelete

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

 
Top