Images are the main part of a blog post and it also plays a important role in the SEO of the blog if you optimize the images with best tricks. Images bring power to the content and the users entertain to read the posts with images and like to share these on social media. By adding this hover effect to your blog images can engage a better result to your blogger blog. Today we will add some hover effect to blog images with CSS.
There are many effects which are available to add in blogger blog with a very easy integration. Lets start adding this amazing option..
How To Add A CSS Effect To Images When Mouse Is Hover Over?
How to Add CSS Hover Effects to Images in Blogger?
We will add multiple effects to images in blogger. I have listed all the effects coding below. I will tell you the step by step guide to add some cool effects to blogger blog. Just follow my steps.
- Go to your blogger Template
- And Then Click on Edit HTML
- And now search for this tag ]]></b:skin>
- And just above this code paste the desired coding.
CSS Effect 1. This hover effect is quite easy to implement and never cause to slowness of your blog. It is very cool styled effect. When you place mouse cursor over the image it will pull the image little upward.
.post-body img {
border: 5px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
}
.post-body img:hover {
margin-top: 2px;
}CSS Effect 2.
This effect will turn your images in to gray color and when a mouse cursor is hover over the images it will turn into the original color.
.post-body img {
filter: url(“data:image/svg+xml;utf8,<svg xmlns=’http://www.w3.org/2000/svg’><filter id=’grayscale’><feColorMatrix type=’matrix’ values=’0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0’/></filter></svg>#grayscale”);
/* Firefox 3.5+ */
filter: gray;
/* IE6-9 */
-webkit-filter: grayscale(100%);
/* Chrome 19+ & Safari 6+ */;
}
.post-body img:hover {
filter: none;
-webkit-filter: grayscale(0%);
}If you like this post then don’t forget to share it with your friends and subscribe us via email on the top right corner. And remember me in your prayers.
