nfianifnian

<style>

#idx1 thead, #idx2 thead, #idx3 thead, #idx5 thead  { display: none; }
#idx1 table tr, #idx2 table tr, #idx3 table tr, #idx5 table tr  { width: 472px; float: left;border: 1px solid rgba(0, 0, 0, 0.3); }
#idx1 td.tc2, #idx1 td.tc3, #idx2 td.tc2, #idx2 td.tc3, #idx3 td.tc2, #idx3 td.tc3, #idx5 td.tc2, #idx5 td.tc3 {display: none; }

div#idx1 h3, div#idx2 h3, div#idx3 h3, div#idx5 h3 { width: 201px; height: 100px; }
table tr td:hover { background: rgba(0, 0, 0, 0.5);}

#idx1 h3, #idx1 div.icon, #idx2 h3, #idx2 div.icon, #idx3 h3, #idx3 div.icon, #idx5 h3, #idx5 div.icon{ display: none; }

div.image {
    position: relative;
    overflow: hidden;
    width: 150px;
    height: 150px;
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 15px;
   
    box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.3);
}

img {
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

span.title {
    width: 150px;
    height: 20px;
    position: absolute;
    background: rgba(30,30,30,0.9);
    text-align: center;
    padding: 5px 0 4px;
    font-size: 14px;
    color: white;
    font-family: "Lucida Sans", "Trebuchet MS", Arial, sans-serif;
   
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
   
}


/* SLIDE Left */

div.image.slideLeft span {
    height: 141px;
    left: -150px;
}

div.image.slideLeft:hover img {
    left: 150px;
}

div.image.slideLeft:hover span {
    left: 0;
}


</style>

<!-- Slide Left -->
    <div class="image slideLeft">
        <img src="http://cssdeck.com/uploads/media/items/8/8NNM3Tc.png" width="201px" height="100px" />
        <span class="title">Caption</span>
    </div>