CSS Code Snippet

The traditional method to creating a great image hover was to use Javascript. Now, thanks to CSS3, it is just not necessary to do so. Reduce your page load times by just initiating this CSS.

 
Simple and Effective CSS
 


#mainwrapper {  
  font: 10pt normal Arial, sans-serif;  
  height: auto;  
  margin: 30px auto 0 auto;
  text-align: center;  
  width: 660px;  
}  

#mainwrapper .box {
    border: 5px solid #fff;
    cursor: pointer;
    height: 172px;
    float: left;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    width: 300px;
    -webkit-box-shadow: 1px 1px 1px 1px #ccc;
    -moz-box-shadow: 1px 1px 1px 1px #ccc;
    box-shadow: 1px 1px 1px 1px #ccc;
}

#mainwrapper .box img {
    position: absolute;
    left: 0;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
	width: auto;
	height: 100%;
}

#mainwrapper .box .caption {
    background-color: rgba(0,0,0,0.8);
    position: absolute;
    color: #fff;
    z-index: 100;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    left: 0;
}
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption {
    opacity: 0;
    width: 288px;
    height: 162px;
    text-align: left;
    padding: 15px;
}

#mainwrapper .box:hover .fade-caption {  
    opacity: 1;  
}

And this how it looks..

Landscape Photography

The image is a pick from Wallpaperology.com

 
Source: ExtremeCSS Blogspot