11 Excellent CSS image hover effects for blogs

"Looking for CSS image hover effects? .Here are the 11 Excellent CSS image hover effects for your blogs and sites."

Now a days we should have to add images in our site content as images can bring life in the content also help to attract visitors. To make our site more interactive and attractive we should have to add CSS image hover effects on images which can bring interativity to our site and also improve image quality and make content more interesting and attractive.

There are many CSS image hover effects are now developed by designers. Therefore, here in this post we have added 12 excellent CSS image hover effects for sites and blogs.

These can be used on blogger blog and on wordpress blogs but we have set the code according to blogger's template settings so we can easily add these CSS image hover effects in blogger by just pasting one of the below code in our template.

How to add CSS image hover effect in blogger

For the newbies who don't know how to add CSS image hover effect in blogge here is small guide for them so they can also become able to add css image hover effects to their blogger blogs. To add CSS image hover effect in blogger follow below steps:

• Goto blogger dashboard
• goto Template >> edit html
• Search for ]]></b:skin> tag ( quick tip: to search easily press ctrl+f )
• Just above ]]></b:skin> paste one of the below CSS image hover effect code.
• and you done!

11 Excellent CSS image hover effects

Grow CSS image hover effect

As seen in the above image with this CSS image hover effect the image will grow in size with the hover of mouse pointer. Below is the CSS chunk for this CSS image hover effect.

.post-body img {
height: 300px;
width: 300px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post-body img:hover {
width: 400px;
height: 400px;
} 

Shrink CSS image hover effect

/*SHRINK*/
.post-body img {
  height: 400px;
  width: 400px;

  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.post-body img:hover {
  width: 300px;
  height: 300px;
}

 Sidepan CSS image hover effect

/*SIDEPAN*/
.post-body img {
  margin-left: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}
.post-body img:hover {
  margin-left: -200px;
}

 Vertical pan CSS image hover effect

/*VERTPAN*/
.post-body img {
  margin-top: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}
.post-body img:hover {
  margin-top: -200px;
}

Tilt CSS image hover effect

 /*TILT*/
.post-body img {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.post-body img:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}

Morph CSS image hover effect

/*MORPH*/
.post-body img {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.post-body img:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

Focus CSS image hover effect

/*FOCUS*/
.post-body img {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.post-body img:hover {
  border: 70px solid #000;
  border-radius: 50%;
}

Blur CSS image hover effect

/*BLUR*/
.post-body img {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.post-body img:hover {
  -webkit-filter: blur(5px);
}

Brighten CSS image hover effect

/*DARKEN*/
.post-body img {
  -webkit-filter: brightness(-65%);
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.post-body img:hover {
  -webkit-filter: brightness(0%);
}

Bump up CSS image hover 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;}

Grayscale effect CSS image hover 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%);}  

Need help!

We hope that this post is helpful for you and you face no problem. Let us know if you get stuck at any point or have any problem in adding one of the above CSS image hover effect to your site or blog we will try to help you within 24 hours.