Media Magazine

How To Add Image Tilt Hover Effect In Blogger

Posted on the 23 January 2016 by Jani18
 Images are very important in designing of blog. you can make each image beautiful with special effect. the post mostly attractive thing in post is image and everyone focus on images and also it help to understand the topic.to make images more stylish i am going to tell piece of codes which produce tilt effect on mouse hover.when someone hover mouse icon on the image it will move little to right which makes blog design more better and impressive. Simply add the below code into your blogger template then it will start working for each and picture of blog post.To add hover effect follow me.add tilt hover effect on blogger

Adding tilt hover effect

Go to blogger and then select template

Edit HTML and press ctrl+f inside code areaSearch for this

]]></b:skin>
paste give code above  ]]></b:skin>
.post-body img { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } .post-body img:hover { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg);
save your template and visit your blog to confirm that effect is working if you face any problem you can ask me.

Back to Featured Articles on Logo Paperblog