How to add CSS hover effect to images in blogger

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

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

Comment With:
OR
Choose Wisely!

8 comments

May 15, 2014 at 1:21 PM

Veryyyy Nice Article BrO :)
Thanks For Sharing :)

May 15, 2014 at 10:56 PM

really nice and helpful article... thanks mbl...

May 20, 2014 at 6:56 PM

very nice brother

June 30, 2014 at 3:46 AM

how to find skin tag? where it placed?

January 31, 2015 at 6:45 AM

ctrl+F then type ]]> enter

JJ
February 11, 2016 at 7:13 AM

This is awesome! Thank you! Is there a way to do it to all images except 1?

July 18, 2016 at 10:32 AM

how to add this effect to a particular image i.e i need different effects for different images.

Editorial Team MOD
July 26, 2016 at 11:34 PM

For that you have to provide different CLASS to a different image and each CLASS having different hover effect.

Cheers

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.