Panel Deskripsi Gambar dengan CSS

Kali ini saya akan share cara membuat Panel Deskripsi Gambar dengan CSS. Gambar akan bergerak dan mengeluarkan panel deskripsi ketika cursor anda di arahkan pada gambar tersebut. Setelah cursor di alihkan, gambar beralih ke tampilan semula. Sekarang mari kita bahas cara membuat panel deskripsi gambar dengan css. Ikuti langkah berikut.

Log in ke blogger
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode ]]></b:skin>

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

Selanjutnya klik Simpan Template
Bila ingin memberikan deskripsi panel pada gambar di posting anda, sertakan kode berikut

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

Contohnya seperti gambar berikut. Arahkan cursor pada gambar di bawah ini

kunjungi blogonol dan dapatkan tutorial blog, seo, widget, template seo friendly gratis, dan blog info untuk membangun blog anda menjadi lebih baik

Silahkan edit width: 263px untuk lebar gambar
Klik Publikasikan dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep spirits and do the best"