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."
CSS image hover effectsNow 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

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 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 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

 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 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 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  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 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

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

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

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.
11 Excellent CSS image hover effects for blogs 11 Excellent CSS image hover effects for blogs Reviewed by Maher Afrasiab on 1:25:00 pm Rating: 5

11 comments:

  1. hey Maher, I am looking for a on hover detail effects. The captain part of the image remain hidden, when a user hover on it, it shows the captain over the image. If there is any jquery which helps me please reply. i want to implement it in this page

    ReplyDelete
  2. thank you mohamed
    a adding the first code to my blog
    www.chatskap.blogspot.com
    :D (y)

    ReplyDelete
  3. Thanks for sharing nice image hovers

    ReplyDelete
  4. Hello bro their is a problem when i add these codes all imgs on my blogspot is captured by these effects.i want to add these effects only on featured imgs

    ReplyDelete
  5. nice share... the original content here http://designshack.net/?p=36895

    ReplyDelete
  6. nice effects

    www.gamesparadis.com

    ReplyDelete

Powered by Blogger.