How to add CSS hover effect to images in blogger

Socialize It →

Tweet

8

Advertisements

Images bring life to content but do they really attract your visitors? Adding a nice CSS hover effect to your images could bring engagement benefits to your blog. Recently one of our users asked us that how to add CSS hover effect to images in blogger? There are many CSS hover effect available that could be applied with ease to your blogger site. Today, in this article we will show you how to add CSS hover effect to images in blogger.

What is mouse hover?

A mouse hover, also known as just hover that triggers an even whenever a mouse is placed over a certain area such as hyperlink on a webpage. This action is also called an action of moving the computer mouse over a specific item that cause a change in effect on hover. Usually, it functions with the help of CSS and JavaScript.

How to Add CSS Hover Effects to Images in Blogger?

In this post, we will be adding multiple CSS effects to images in blogger so we have listed all the hover effects below that are used and recommend by most of the web designers:

The very first thing you need to do is to go to Blogger >> Template >> Edit HTML and search for the ]]></b:skin> tag. After finding the ]]></b:skin> tag, just above it paste the following piece of code. Remember: Paste any one effect from the following codes listed below).

Effect #1: Bump Up:
This effect is super easy to implement and doesn't even causes any kind of slowness to your blog. This works best when you have a serise of images in horizontal item. It moves the image a little bit towards upward direction when mouse is placed on it.

.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;
}

Effect#2: Grayscale Effect:
This effects turns your all images to grayscale and whenever a mouse is placed over a image it can be seen in its orginal color. In other words it converts your images to black and white but on hover shows them in their orginal 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%);
}

We hope this tutorial may have helped you in adding some cool hover effects to your images in blogger. However, if you have any other useful hover effects for images then do share with us in the comments below. 

Advertisements

About the Editorial Team

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).