SOURCE

<div id="mainwrapper"><!-- This #mainwrapper section contains all of our images to make them center and look proper in the browser ->  
        <!-- Image Caption 1 -->  
        <div id="box-1" class="box">  
            <img id="image-1" src="http://sandbox.runjs.cn/uploads/rs/95/65is2a4u/bird.jpg" width="200" height="200"/>  
            <span class="caption simple-caption">  
            <p>Simple Caption</p>  
            </span>  
        </div>  
      
        <!-- Image Caption 2 -->  
        <div id="box-2" class="box">  
            <img id="image-2" src="http://sandbox.runjs.cn/uploads/rs/95/65is2a4u/bird2.jpg" width="200" height="200"/>  
            <span class="caption full-caption">  
            <h3>Full Caption</h3>  
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
            </span>  
        </div>  
      
        <!-- Image Caption 3 -->  
        <div id="box-3" class="box">  
            <img id="image-3" src="http://sandbox.runjs.cn/uploads/rs/95/65is2a4u/fish2.jpg" width="200" height="200"/>  
            <span class="caption fade-caption">  
            <h3>Fade Caption</h3>  
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
            </span>  
        </div>  
          
        <!-- Image Caption 4 -->  
        <div id="box-4" class="box">  
            <img id="image-4" src="http://sandbox.runjs.cn/uploads/rs/95/65is2a4u/tx.png" width="200" height="200"/>  
            <span class="caption slide-caption">  
            <h3>Slide Caption</h3>  
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
            </span>  
        </div>  
          
        <!-- Image Caption 5 -->  
        <div id="box-5" class="box">  
            <div class="rotate"><!-- Rotating div -->  
							<img id="image-5" src="http://sandbox.runjs.cn/uploads/rs/95/65is2a4u/border.png" width="200" height="200"/>  
                <span class="caption rotate-caption">  
                <h3>This is rotate caption</h3>  
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
                </span>  
            </div>  
        </div>  
      
        <!-- Image Caption 6 -->  
        <div id="box-6" class="box">  
            <img id="image-6" src="http://sandbox.runjs.cn/uploads/rs/95/65is2a4u/aaa.svg" width="200" height="200"/>  
            <span class="caption scale-caption ">  
            <h3>Free Style Caption</h3>  
            <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
            </span>  
        </div>  
    </div>

html { background-color: #eaeaea; }  
p,h3{border: 0 none;
    font: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline;}
 		p{ margin-bottom: 1em ; font-size: 12px; } 
h3 {
    font-size: 108%;margin: 1em 0; font-weight:blod;
}
    #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: 182px;  
        float: left;  
        margin: 5px;  
        position: relative;  
        overflow: hidden;  
        width: 200px;  
        -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;  
    }  
    #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 .simple-caption {  
        height: 30px;  
        width: 200px;  
        display: block;  
        bottom: -30px;  
        line-height: 25pt;  
        text-align: center;  
    }  
    #mainwrapper .box .full-caption {  
        width: 170px;  
        height: 170px;  
        top: -200px;  
        text-align: left;  
        padding: 15px;  
    }  
    #mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption {  
        opacity: 0;  
        width: 170px;  
        height: 170px;  
        text-align: left;  
        padding: 15px;  
    } 
   /** Caption 4: Slide **/  
    #mainwrapper .box .slide-caption {  
        width: 170px;  
        height: 170px;  
        text-align: left;  
        padding: 15px;  
        left: 200px;  
    }  

    #mainwrapper #box-5.box .rotate-caption {  
        width: 170px;  
        height: 170px;  
        text-align: left;  
        padding: 15px;  
        top: 200px;  
        -moz-transform: rotate(-180deg);  
        -o-transform: rotate(-180deg);  
        -webkit-transform: rotate(-180deg);  
        transform: rotate(-180deg);  
    }  
      
    #mainwrapper .box .rotate {  
        width: 200px;  
        height: 400px;  
        -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;  
    }  
    #mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p {  
        position: relative;  
        left: -200px;  
        width: 170px;  
        -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;  
    }  
      
    #mainwrapper .box .scale-caption h3 {  
        -webkit-transition-delay: 300ms;  
        -moz-transition-delay: 300ms;  
        -o-transition-delay: 300ms;  
        -ms-transition-delay: 300ms;  
        transition-delay: 300ms;  
    }  
      
    #mainwrapper .box .scale-caption p {  
        -webkit-transition-delay: 500ms;  
        -moz-transition-delay: 500ms;  
        -o-transition-delay: 500ms;  
        -ms-transition-delay: 500ms;  
        transition-delay: 500ms;  
    }  
    #mainwrapper .box:hover .simple-caption {  
        -moz-transform: translateY(-100%);  
        -o-transform: translateY(-100%);  
        -webkit-transform: translateY(-100%);  
        transform: translateY(-100%);  
    }  
#mainwrapper .box:hover .full-caption {  
    -moz-transform: translateY(100%);  
    -o-transform: translateY(100%);  
    -webkit-transform: translateY(100%);  
    transform: translateY(100%);  
}   
    #mainwrapper .box:hover .fade-caption {  
        opacity: 1;  
    }  
    #mainwrapper .box:hover .slide-caption {  
      background-color: rgba(0,0,0,1) !important;  
      -moz-transform: translateX(-100%);  
      -o-transform: translateX(-100%);  
      -webkit-transform: translateX(-100%);  
      opacity: 1;  
      transform: translateX(-100%);  
    }  
    #mainwrapper .box:hover img#image-4 {  
      -moz-transform: translateX(-100%);  
      -o-transform: translateX(-100%);  
      -webkit-transform: translateX(-100%);  
      transform: translateX(-100%);  
    }  
    /** Rotate Caption :hover Behaviour **/  
        #mainwrapper .box:hover .rotate {  
        background-color: rgba(0,0,0,1) !important;  
        -moz-transform: rotate(-180deg);  
        -o-transform: rotate(-180deg);  
        -webkit-transform: rotate(-180deg);  
        transform: rotate(-180deg);  
    }  
#mainwrapper .box:hover #image-6 {  
   -moz-transform: scale(1.4);  
   -o-transform: scale(1.4);  
   -webkit-transform: scale(1.4);  
	transform: scale(1.4);
}
    #mainwrapper .box:hover .scale-caption h3,#mainwrapper .box:hover .scale-caption p {  
        -moz-transform: translateX(200px);  
        -o-transform: translateX(200px);  
        -webkit-transform: translateX(200px);  
        transform: translateX(200px);  
	
    }    
#mainwrapper .box:hover .fade-caption, #mainwrapper .box:hover .scale-caption {
    opacity: 1;
}