Awesome Image Hower Effect with Caption

This Effect is Mostly Created with Combination of Javascript and Css

By the Below CSS Code Create Same Effect without javascript

For Live Demo visit http://extremecss.blogspot.in/2014/01/awesome-image-hover-effect-using-pure.html


                                          #mainwrapper {
    font: 10pt normal Arial, sans-serif;
    height: auto;
    margin: 80px 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: 280px;
    height: 152px;
    text-align: left;
    padding: 15px;
}
 #mainwrapper .box:hover .fade-caption {
    opacity: 1;
}

Favorite0