20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

Adding CSS Hover Effect In Blogger Images

how to Add a beautiful bump up and grey color css hover effect in your blogger picture,display image hover animation effect on blogspot wallpapers.
adding css image effect convert image into grey color on hover
Hello Folks,Today in this article we are going to explain How to Add Css Image Hover Effect In Blogger Template.Whenever a mouse is placed over a certain image or hyperlink in webpage that action is called a effect on hover.In this article we are applying pure CSS t oconvert images into Greyscale effect(when you place a mouse on image the colorful image will convert into beautiful grey scale image) and second one Bump up effect (means when you place a mouse on a image it will bounce up means it will bounce up in upward direction).By adding a nice hover animation effect on your images will really attract to your visitors.To grab this trick follow the steps mentioned below.

create css hover effect in blogger images

installation steps:

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for ]]></b:skin> by Pressing Ctrl+F keys.
Step 4.Copy the below code and paste it just before the ]]></b:skin> tag.


For Bump Up Effect:
.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;
}
For GreyScale Effect :
.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%);
}
 Step 5. Now Save your template..Done !

We hope this article helped you to learn How to Add a  CSS Hover Effect In Blogger Images Trick.If you liked this article please Join us on Facebook,Twitter,Google Plus.

Post a Comment