HTML
<div class="image-box-wrapper" id="image-box-wrapper"> <!-- `.image-box` start --> <div class="image-box"> <div class="image-container"> <img src="img/image-1.jpg" alt=" Sliding Up Image Description" width="200" height="150"> </div> <div class="image-details"> <div class="details"> <h4>Description Title</h4> <p>Description text...</p> <p><a class="more" href="#">More</a></p> </div> </div> </div> <!-- `.image-box` end --> ... ... ... <div class="clear"></div> </div>CSS
.image-box-wrapper { width:642px; margin:50px auto; } .image-box { width:210px; height:160px; overflow:hidden; background-color:white; border:1px solid #ccc; float:left; margin:1px 1px; font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif; color:#333; } .image-container, .image-details { height:150px; border:5px solid white; background-color:#ffc; -webkit-transition:margin-top .4s ease-out .4s; -moz-transition:margin-top .4s ease-out .4s; -ms-transition:margin-top .4s ease-out .4s; -o-transition:margin-top .4s ease-out .4s; transition:margin-top .4s ease-out .4s; } .image-container img { width:200px; height:150px; padding:0 0; margin:0 0; border:none; outline:none; max-width:none; max-height:none; background-color:black; } .image-details h4, .image-details p { margin:0 0 .2em; padding:0 0; height:70px; } .image-details h4 { font-size:120%; height:auto; } .image-details .details { padding:10px 12px; overflow:hidden; } .image-details .more { color:white; text-decoration:none; display:block; text-align:center; font-weight:bold; background-color:#f9a; height:26px; line-height:26px; margin:10px 0 0; } .image-box:hover {border-color:#bbb} .image-box:hover .image-container {margin-top:-160px} .image-details .more:hover {background-color:black}