Ditulis oleh: Ditulis pada: 10/06/2014
Show Hide Deskripsi Gambar Postingan Reponsive - Berawal dari ketertarikan saya pada artikel mbak +ana sriwahyuni tentang floating caption pada gambar postingan, kini saya mencoba hal serupa namun dengan kode CSS dan HTML yang berbeda dan dengan gambarnya yang responsive untuk menambah variasi atau alternative pada penambahan efek caption gambar postingan.
Masih mengandalkan efek hover untuk membuat show hide deskripsi atau caption pada gambar postingan responsive ini, sehingga dengan begitu deskripsi atau caption gambarnya akan muncul ketika gambar dihover.
Untuk contoh show hide deskripsi gambar responsive ini bisa Anda lihat pada gambar animasi gif di bawah ini.
Jika Anda tertarik untuk mencobanya, silahkan gunakan kode-kode di bawah ini.
Kode CSS
.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%;}
}
Kode HTML
Gunakan kode di bawah ini ketika akan menyimpan gambar dengan deskripsi di postingan, sebaiknya gunakan gambar dengan dimensi yang besar, misalnya 600px x 300px namun memiliki size yang kecil agar tidak membebani loading halamannya.
<div class="imagebox">
<img alt="thumbnail" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0MTSO8sJlvRazl_d_VKWKrB0-XVLMA4BTq2d7OOsNSn_fRHbj33OdH7frynr6mTMjZ6WaP2Hrps5HtESUNe4MQwDShdh7YOMURKZx6YvHWUuoFLsjMYN69em-jUaQCjCDG5YDXnuqi7EQ/s1600/windows-10.png" width="600" title="Capable of seating 50,000 spectators"/>
<div class="imgdescription">
Ini adalah contoh deskripsi gambar dengan hover, <a href="http://www.kompiajaib.com/" title="Contoh Link">Kompi Ajaib</a> ini adalah contoh link dalam deskripsi gambar.
</div>
</div>
Silahkan ganti alt dan title tag, serta tinggi dan lebar sesuai dengan gambar yang diunggah. Ganti URL gambarnya dengan URL gambar yang Anda unggah. Untuk deskripsi atau caption gambarnya Anda simpan di dalam
class="imgdescription" seperti contoh di atas. Di sini Anda bisa juga menyimpan link pada deskripsi gambarnya.
Sebagai live demonya, silahkan coba demonya di JSFiddle di bawah ini, silahkan coba geser-geser kolomnya untuk melihat responsive gambarnya.