Menambahkan Gaya Sliding Up Pada Gambar

Good Morning !!

Pagi yang cerah ini saya ingin berbagi Tips&Trick kepada anda. Seperti judul yang sudah terpapar diatas, jadi postingan kali ini yaitu bagaimana cara anda menambahkan sedikit keistimewaan pada gambar yang anda posting sebelumnya. Terlihat jelas di samping kanan postingan saya, bahwa saya sudah memiliki keistimewaan itu, tapi anda bisa lebih bereksperimen lagi dengan itu dan membuatnya lebih istimewa. so,, bagaimana dengan kodennya ? jangan khawatir, karena saya sudah mempersiapkannnya untuk anda. Follow mystep !

1. Pergi ke Dasaboard kemudian pilih Tata Letak
2. Tambahkan Widget dan pilih HTML/Javascript
3. Tambahkan kode dibawah

<style>
.image-box {
  width:240px;height:240px;overflow:hidden;background-color:white;
  border:1px solid #000000;float:left;margin:1px 1px;
  font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;
  color:#000000;
}
.image-container,
.image-details {height:240px;border:4px solid white;background-color:#FF8C00;
  transition:margin-top .3s ease-out .3s;
}
.image-container img {
  width:280px;height:240px;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 .1em;padding:0 0;height:30px;
}
.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:#FF0000;height:20px;line-height:20px;margin:40px 0 0;
}

.image-box:hover {border-color:#FF0000; width:240px;
  height:240px;}
.image-box:hover .image-container {margin-top:-120px}
.image-details .more:hover {background-color:black}
</style>

<div class="image-box-wrapper" id="image-box-wrapper">
 <div class="image-box">
  <div class="image-container">
   <img width="240" height="240" src="http://wallpapercave.com/wp/ivq3aPw.jpg" />
  </div>
  <div class="image-details">
   <div class="details">
    <p>Hulk is The Best .</p>
    <p><a class="more" href="https://plus.google.com/104358344078569022230/posts?hl=id ">More</a></p>
   </div>
  </div>
 </div>

 <div style="clear:both;"></div>

</div>