Add CSS hover effect to images in blogger

Add CSS hover effect to images in blogger



Today we will learn about "How to add beautiful CSS hover effect" to blogger blog images, Images play an important role to attract the eye of visitors toward itself and by adding different hover stylish effect it become more attractive.

About Mouse Hover (effect):
A mouse hover, also known as just hover that triggers an even whenever a mouse is placed over a specific 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 it to blogger?

here are is the method for adding CSS image hover effect for your blogger. This effect brings the transparency over images.

  • Open Your Blogger Dashboard >> Template
  • Then click on Edit HTML and by pressing ctrl+f search for ]]></b:skin> 
  • Then pick your favorite Effect from the give effect below, copy the code of the effect and paste it above ]]></b:skin>
  • Save your template, thats all.

Effect 1

Code:
.post-body img {
    filter: url("data:image/svg+xml;utf8,<svg style="background-color: #fcfcfc; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px dotted rgb(0, 0, 0); color: #120e00; font-family: Verdana, arial; font-size: 15px; font-weight: 200; letter-spacing: 0.12999999523162842px; line-height: 1; margin-bottom: 16px; padding: 3px; text-indent: 1px;">Effect 2
Code:
.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 image effect

Demo of Tilt Image Hover Effect ?


blogger logo

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

Hope it helps and stay tuned with us for more awesome tricks.

go to link download