Membuat Sliding Up Image Description ~ Blog Alvin Warasi

Anda mungkin tahu tentang Google Chrome Web Store, ya situs penyedia aplikasi yang dapat di tambahkan ke dalam Google Anda ini adalah gudangnya aplikasi top-top yang dapat Anda gunakan dengan online. Dalam memasang aplikasi, cukuplah mudah, yakni hanya dengan mengarahkan kursor dan penjelasan serta tombol pemasangan otomatis akan terpasang pada Google Chrome Anda.

Namun ternyata, sekarang Anda dapat mengaplikasikan Sliding Up Description yang terdapat pada Google Chrome Web Store ke dalam website Anda, berikut caranya:

1. Copy lalu tempelkan kode HTML berikut.

<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="" 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>

2. Kemudian tambahkan kode CSS berikut tepat di atas kode ]]></b:skin> atau </style>

.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}

3. Lalu lihat hasilnya. Apakah kode di atas berhasil atau tidak.

DEMO-nya kurang lebih seperti di bawah ini: