Membuat panel deskripsi Gambar dengan CSS keren

   Pada posting kali ini, saya akan share tentang Membuat panel Deskripsi gambar dengan CSS. Maksudnya, saat mouse diarahkan ke gambar, dibawah gambar akan langsung muncul panel deskripsi gambar. Yah, seperti tooltip. Bedanya, panel deskripsi ini muncul dibawah, sedangkan tooltip muncul di setiap area. Oke, langsung saja mulai.

1. Login blog.
2. Centang Expand template widget.
3. Gunakan CTRL dan F.
4. Cari kode ]]></b:skin>.
5. Copas kode dibawah ini, lalu letakkan diatas tag ]]></b:skin> tadi.

.imagepluscontainer{  position:relative;  z-index:1;  font-family:verdana;  font-size:13px}

.imagepluscontainer img{  position:relative;  z-index:2;  -moz-transition:all 0.5s ease;   -webkit-transition:all 0.5s ease-in-out;  -o-transition:all 0.5s ease-in-out;  -ms-transition:all 0.5s ease-in-out;  transition:all 0.5s ease-in-out}

.imagepluscontainer:hover img{  -moz-box-shadow:5px 5px 5px rgba(0,0,0,0.5);  -webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.5);  box-shadow:5px 5px 5px rgba(0,0,0,0.5);  -moz-transform:scale(1.05,1.05);  -webkit-transform:scale(1.05,1.05);  -ms-transform:scale(1.05,1.05);  -o-transform:scale(1.05,1.05);  transform:scale(1.05,1.05)}

.imagepluscontainer div.desc{  position:absolute;  width:90%;  z-index:1;   bottom:0;   left:5px;  padding:8px;  background:rgba(0,0,0,0.8);   color:white;  -moz-border-radius:0 0 8px 8px;   -webkit-border-radius:0 0 8px 8px;  border-radius:0 0 8px 8px;  opacity:0;   -moz-box-shadow:0 0 6px rgba(0,0,0,0.8);   -webkit-box-shadow:0 0 6px rgba(0,0,0,0.8);  box-shadow:0 0 6px rgba(0,0,0,0.8);  -moz-transition:all 0.5s ease 0.5s;   -webkit-transition:all 0.5s ease 0.5s;  -o-transition:all 0.5s ease 0.5s;  -ms-transition:all 0.5s ease 0.5s;  transition:all 0.5s ease 0.5s}

.imagepluscontainer div.desc a{ color:white}

.imagepluscontainer:hover div.desc{  -moz-transform:translate(0,100%);  -webkit-transform:translate(0,100%);  -ms-transform:translate(0,100%);  -o-transform:translate(0,100%);  transform:translate(0,100%);  opacity:1}

.imagepluscontainer div.rightslide{ width:150px;   top:15px;  right:0;  left:auto;   bottom:auto;   padding-left:15px;  -moz-border-radius:0 8px 8px 0;  -webkit-border-radius:0 8px 8px 0;  border-radius:0 8px 8px 0}

.imagepluscontainer:hover div.rightslide{ -moz-transform:translate(100%,0);  -webkit-transform:translate(100%,0);  -ms-transform:translate(100%,0);  -o-transform:translate(100%,0);  transform:translate(100%,0)}

.imagepluscontainer div.leftslide{ width:150px;   top:15px;  left:0;  bottom:auto;   padding-left:15px;  -moz-border-radius:8px 0 0 8px;  -webkit-border-radius:8px 0 0 8px;  border-radius:8px 0 0 8px}

.imagepluscontainer:hover div.leftslide{ -moz-transform:translate(-100%,0);  -webkit-transform:translate(-100%,0);  -ms-transform:translate(-100%,0);  -o-transform:translate(-100%,0);  transform:translate(-100%,0)}

.imagepluscontainer div.upslide{ top:0;  bottom:auto;   padding-bottom:10px;  -moz-border-radius:8px 8px 0 0;  -webkit-border-radius:8px 8px 0 0;  border-radius:8px 8px 0 0}

.imagepluscontainer:hover div.upslide{ -moz-transform:translate(0,-100%);  -webkit-transform:translate(0,-100%);  -ms-transform:translate(0,-100%);  -o-transform:translate(0,-100%);  transform:translate(0,-100%)}

6. Selanjutnya, klik Save template.

   Selesai! Sekarang, anda hanya butuh script untuk menampilkan penel deskripsi tersebut di postingan blog anda. Caranya, sebagai berikut :
1. Klik Buat entri baru.
2. Ubah mode compose menjadi HTML.
3. Lalu, masukkan/paste kode seperti dibawah ini :

<center><div class="imagepluscontainer" style="width:263px;">

<img alt="JUDUL GAMBAR" src="ALAMAT/ LINK GAMBAR">

<div class="desc downslide">

MASUKKAN DESKRIPSI GAMBAR DI SINI

</div></div></center>

4. Lalu, klik pratinjau untuk melihat tampilan maksimalnya.
5. Tulis artikel dalam mode compose, lalu klik publikasikan.

 Keterangan :
a). Kode berwarna biru adalah lebar gambar.

 Jadinya akan seperti ini gan sumber