Latest: Tsu Review - Social Media Network To Make Money | - | Recommended: Facebook Tips, Tricks And Tutorials
Subscribe For Free Latest Updates!

We'll not spam mate! We promise.

Tuesday, 4 February 2014

How To Add Image Tilt Image Hover Effect on Blogger Posts



Tilt image effect
Images play an important role in designing. So try to make each image stylish. Within the post mostly everyone focus on images in understand better about that topic. So to make images more beautiful today i going to introduce some piece of codes which gives tilt effect on mouse hover. Means when someone hover mouse button on the image it will bend little bit which makes your blog design more better. Simple add the code into your template then if will work for each and picture of blog post. So before using must check out the demo given to check out its working simple move your mouse and after testing demo if you want to add this effect on your blogger post then follow below given steps.

Demo of Tilt Image Hover Effect


blogger logo

How To Add This Tilt Hover Effect

  • Open Your Blogger Dashboard >> Template
  • Then click on Edit HTML and Search by ctrl+f into coding box for ]]></b:skin> 
  • After searching above code simple paste below given coding 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);
}
  • After Pasting above code simple Save Your Settings
  • Now open your any published blog post and test out by moving mouse on it.
For More Widgets:- Important Blogger Widgets And Plugins

If you like this tutorial don't forget to share it with others. 

3 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. wow great work,, its cute , implemented without any issues

    One learning:- i was trying to put comment before this code,, but it was not working

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

    Happy sharing
    gaurav K
    www.udzial.com - udzial means share

    ReplyDelete
  2. bro doesnt work at all, i dont know the problem

    ReplyDelete



Copyright © - 2014. Safe Tricks - All Rights Reserved
(Articles Cannot Be Reproduced Without Author Permission.)
Author : | Powered by: Blogger