How to Add Awesome Tilt Image Effect to Blogger

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. This tutorial will show you How To Add Awesome Tilt Image Effect Using CSS to all your images in you blog

TILT IMAGE EFFECT DEMO

HOW TO ADD AWESOME TILT IMAGE EFFECT USING CSS TO BLOGGER

• Go to Blogger Dashboard --> Design --> Edit HTML
• Backup your Template before making any changes to your blog
• Now  Expand Widget Templates
• Press Ctrl + F and search the code shown below

</b:skin>

• Now replace it with the code shown below

.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