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 ▼
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.
If you like this tutorial don't forget to share it with others.
No comments:
Post a Comment