CATEGORY

see also

Infolinks In Text Ads

Search This Blog

How to Add Tilt Image Effect on Blogger Post Images



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.

Changing the Rotation Amount for Images :

Well if you want your images to be rotated more, just change the values in red by the one you like just change the number and try refreshing your blog if you feel comfortable with it just keep those settings and enjoy tilt effect.

No comments:

Post a Comment

Blog Archive

like us on fb