Cara Membuat Sliding Up Image

Sliding up image dengan css3 saya upie nawa akan memberikan trik nya untuk kalian anda tau google store ?! yup seperti itulah gambaran nya tapi jika anda kurang jelas anda bisa lihat demo nya View Demo gimana ?! anda tertarik untuk memasang nya ?! 

http://id-upienawa.blogspot.com/2013/06/cara-membuat-sliding-up-image.html
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}

HTML

<div class="image-box-wrapper" id="image-box-wrapper">
<div class="image-box">
<div class="image-container">
<img width="200" height="150" src="http://lorempixel.com/200/150/food/1" alt="Food">
</div>
<div class="image-details">
<div class="details">
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
<p><a class="more" href="#">More</a></p>
</div>
</div>
</div>
<div class="image-box">
<div class="image-container">
<img width="200" height="150" src="http://lorempixel.com/200/150/food/2" alt="Food">
</div>
<div class="image-details">
<div class="details">
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
<p><a class="more" href="#">More</a></p>
</div>
</div>
</div>
<div class="image-box">
<div class="image-container">
<img width="200" height="150" src="http://lorempixel.com/200/150/food/3" alt="Food">
</div>
<div class="image-details">
<div class="details">
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
<p><a class="more" href="#">More</a></p>
</div>
</div>
</div>
<div class="image-box">
<div class="image-container">
<img width="200" height="150" src="http://lorempixel.com/200/150/food/4" alt="Food">
</div>
<div class="image-details">
<div class="details">
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
<p><a class="more" href="#">More</a></p>
</div>
</div>
</div>
<div class="image-box">
<div class="image-container">
<img width="200" height="150" src="http://lorempixel.com/200/150/food/5" alt="Food">
</div>
<div class="image-details">
<div class="details">
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
<p><a class="more" href="#">More</a></p>
</div>
</div>
</div>
<div class="image-box">
<div class="image-container">
<img width="200" height="150" src="http://lorempixel.com/200/150/food/6" alt="Food">
</div>
<div class="image-details">
<div class="details">
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
<p><a class="more" href="#">More</a></p>
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>