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.
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.
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 {Step 5. Now Save your template..Done !
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 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.