Tilt image effect for blogger post images will tilt your images to a particular direction and tilt them again when you mouse over those images. Well this is just for adding some motion to those image so that your readers enjoy that cool effect. So now you can see the effect demo below for the images you are going to get on your images.
So now how you can achieve this effect on your blogger images is explained below so follow the steps and enjoy this cool effect.I found this effect given on hacking university.Them for this awsome effect.
So now how you can achieve this effect on your blogger images is explained below so follow the steps and enjoy this cool effect.I found this effect given on hacking university.Them for this awsome effect.
- Go to blogger and sign in to your account
- choose your blog and go to Template > Edit html
- Now press ctrl + F find this tag ]]></b:skin> and paste the code given 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 the template and refresh the page to see the effects live on your page
- There is another awsome image rotation effect that you can use, just replace the above code with the code given below.
- .post img:hover{-moz-box-shadow:0 0 20px red;-moz-transform:scale(1.2) rotate(-350deg);-ms-transform:scale(1.2) rotate(-350deg);-o-transform:scale(1.2) rotate(-350deg);-webkit-box-shadow:0 0 20px red;-webkit-transform:scale(1.2) rotate(-350deg);box-shadow:0 0 20px red;transform:scale(1.2) rotate(-350deg)}
- Now again save the template and see the effects live on your blog.
No comments:
Post a Comment
I appreciate you feedback and suggestions :D