Top 10 Widely Used Image Hover Effects

You might have seen a roll over Image effect in many professional and commercial sites.


 By roll over I mean that when you hover your mouse cursor on the Image, the image border colour and style/appearance changes. Well using some simple CSS you can add some amazing effects to your Blog Images. Without wasting any time lets jump straight to the steps to be followed.

Code Compatible browsers:

Steps:-

1- First we start by defining the css code between "<head>" tags or reference to the css sheet you want

2- add any img tage in your document that contain the class name or id of the css code

example:

suppose we have css code as follow

.simple1 {
  padding:5px;
  border:1px solid #ccc;
  }
.simple1:hover {
  padding:5px;
  background-color:#ccc;
  }

then we add html img tag in the document as follow :

<img class="simple1" src="your image source">

then save the page and run your page.

and here are the top css hover effects for images

Example 1:

.simple2 {
  padding:5px;
    background-color:#ccc;
border:1px solid #ddd;
  }
.simple2:hover {
  padding:5px;
   background-color:#eee;
border:1px solid #666;
  }

Example 2:

.black-white {
  padding:5px;
border:1px solid #ccc;
  }
.black-white:hover {
padding:5px;
  background-color:#fff;
border:10px solid #000;
  }

Example 3: 

.dashed {
  padding:5px;
border:1px solid #ccc;
  }
.dashed:hover {
padding:5px;
  background-color:#fff;
border:2px dashed #000;
  }

Example 4: 

.top-bottom {
  padding-top:5px;
  padding-bottom:5px;
border-top:3px solid #ddd;
border-bottom:3px solid #ddd;
  }
.top-bottom:hover {
  background-color:#fff;
border-top:3px solid #000;
border-bottom:3px solid #000;
  }

Example 5: 

.curtain {
  padding-top:10px;
  padding-bottom:10px;
border-top:2px solid #ddd;
background-color:#000;
border-bottom:2px solid #ddd;
  }
.curtain:hover {
  background-color:#fff;
border-top:3px solid #000;
border-bottom:3px solid #000;
  }

Example 6: 

.red {
  padding:5px;
border:1px solid #ccc;
  }
.red:hover {
padding:5px;
  background-color:#E71305;
border:10px solid #ddd;
  }

Example 7: 

.Fadein{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.Fadein:hover{
filter:alpha(opacity=50);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}

Example 8: 

.Fadein2{
filter:alpha(opacity=50);
-moz-opacity: 0.30;
opacity: 0.30;
border:2px solid #000;

}
.Fadein2:hover{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:2px solid #000;
}

Example 9: 

.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
background-color: #7AA1C3;
padding: 0px;
left: -1000px;
border: 1px solid gray;
visibility: hidden;
color: white;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 0px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 5px;
}

you can appy the example 9 css for the next html code.

<a class="thumbnail" href=""><img src="Add Image URL Here" width="100px" height="100px" border="0px" /><span><img src="Add Image URL Here" /><br /> Image Description here </span></a>

Cheeeeers :D