Desain Keterangan Gambar dengan Css3

Menampilkan keterangan gambar pada sebuat gambar yang postingkan pada blog sangatlah bermanfaat untuk mempermudah pengunjung untuk mengerti dari gambar yang kita tampilkan. Mungkin saat ini sangat banyak tips yang memberi desain keterangan gambar. Berikut ini adalah tips dengan kode Css3. Efek hover yang ditampilkan pada keterangan gambar berbentuk slide dari arah kiri ke arah kanan dan sebagai alternatif pilihan, efek hover ini bisa dari bawah ke atas, dan script yang digunakan menggunakan css level 3.

Menambahkan keterangan gambar pada post, tentu saja akan mempercantik tampilan blog, terutama untuk tampilan post. Script ini sangat cocok digunakan bagi mereka yang mempunyai blog dengan banyak penggunaan gambar sebagai penambah keterangan suatu posting (artikel). Kelebihan script ini karena menggunakan css, tentu saja penggunaannya mudah dan untuk hover keterangan gambar pun akan menyesuaikan ukuran dari gambar yang ditampilkan.

Untuk memperjelas seperti apa tampilan keterangan gambar yang akan kita pelajari, sobat blogger bisa lihat pada demo di bawah ini

DEMO

Setelah melihat gambat tersebut mungkin sobat blogger tertarik ingin menampilkannya pada blog sobat. Jika sobat blogger tertarik, silahkan lihat langkah-langkahnya seperti berikut:

1. Login ke blogger dengan account anda

2. Pilih Template - Edit HTML

3. Letakkan kode css berikut di atas ]]></ b: skin>

#objek {
float: left;
margin: 10px;
overflow: hidden;
position: relative;
}
.ket {
width: 80%;
height: auto;
text-align: left;
padding: 5px 10px;
background: #000;
opacity: 0.6;
color: #fff;
line-height: 18px;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
-webkit-border-radius: 0x 25px 0px 0px;
-moz-border-radius: 0px 25px 0px 0px;
-o-border-radius: 0px 25px 0px 0px;
border-radius: 0px 25px 0px 0px;
}
#objek .ket {
position: absolute;
bottom: 0;
left: 0;
margin-left: -1000px;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
#objek:hover {
-webkit-box-shadow:0px 0px 25px #000000;
-moz-box-shadow:0px 0px 25px #000000;
-o-box-shadow:0px 0px 25px #000000;
box-shadow:0px 0px 25px #000000;
}
#objek:hover .ket {
margin-left: 0px;
}

4. Silahkan Simpan Template blog anda.
5. Kemudian silahkan beralih ke New Post - Edit HTML
6. Letakkan kode HTML berikut

<div id="objek">
<img src="url gambar" />
<div class="ket">
<b>JUDUL GAMBAR</b><br />
keterangan/penjelasan dari gambar
</div>
</div>

7. Silahkan edit tulisan berwarna putih.
8. Silahkan Publish dan lihat perubahan yang terjadi.
Selamat mencoba, semoga berhasil dan mohon maaf jika ada kesalahan.
================================================================

Catatan:

================================================================
Script tersebut diatas merupakan efek hover dari kiri ke-kanan, untuk menghasilkan efek hover dari bawah ke-atas, kalian cukup mengganti kode :

#objek:hover .ket {
margin-left: 0px;
}

Menjadi

#objek .ket {
margin-bottom: -300px;
}

dan

#objek:hover .ket {
margin-bottom: 0px;
}

(Jkt/2012)