Hover Effects for the awesome look

Hover effect can give a awesome look to your blog, website etc. Just move the mouse cursor on the image and it show something interesting.

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.










Some of effects for are:

Follow the steps and instructions

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 tag, just above it paste the following piece of code.



Effect #1. Greyscale effect

In this effect all of the images of your blog or websites are turn into black and white images and when the mouse cursor is move on the images the hover is shown and original colors of images is shown.

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

Effect #2. Bump up

In this effect the when the mouse cursor is move on the image hover is shown and the images is move little towards the upward direction.

.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 #3. Tilt
In this effect when the mouse cursor is move on the image the is tilt .


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




Note :- Apply single effect at once..

for more tricks visit to http://hackxtech.blogspot.in/ or http://hackersfall.org
if you like the post please share ....