Show Hide Description Image Blog

Show Hide Description Image Blog - Setelah lama saya tidak membuat postingan akhirnya kesampean juga. Kali ini saya akan membagaikan Show Hide Description Image Blog. Sebenarnya Show Hide Description Image Blog sudah pernah di bagaikan oleh Kompi Ajaib. Disini saya hanya repost saja. Menurut saya Show Hide Description Image Blog juga terpengaruh ke SEO juga. Bila tertarik silahkan terapkan kode - kode di bawah ini ke template anda.


.imagebox{position:relative;width:80%;height:auto;z-index:2;margin:0 auto;padding:0}
.imagebox img{position:relative;z-index:1;transition:all .5s ease-in-out;width:auto;max-width:100%;height:auto}
.imagebox div.imgdescription{position:absolute;width:80%;z-index:2;bottom:-100px;left:50%;margin-left:-42%;padding:2%;text-align:center;background:rgba(0,0,0,0.8);color:white;border-radius:8px;opacity:0;transition:all .5s ease .5s;font-size:100%}
.imagebox div.imgdescription a{color:white;text-decoration:underline}
.imagebox:hover div.imgdescription{bottom:15px;opacity:.8}
@media screen and (max-width:480px){
    .imagebox{width:100%;}
}


<div class="imagebox">
<img alt="thumbnail" height="300" src="URL-GAMBAR" width="600" title="JUDUL-GAMBAR"/>
<div class="imgdescription">
    Ini adalah contoh deskripsi gambar dengan hover, <a href="http://www.webshared.net/" title="Web Shared">Web Shared</a> ini adalah contoh link dalam deskripsi gambar.
</div>
</div>

Website sementara masih dalam kondisi perbaikan, untuk sementara website utama beralih ke Jumbo Cell