Show Hide Deskripsi Gambar Postingan Responsive
Show Hide Deskripsi Gambar Postingan Reponsive - Berawal dari ketertarikan aku pada artikel mbak floating caption pada gambar postingan, sekarang aku mencoba hal serupa namun dengan instruksi CSS dan HTML yang berbeda dan dengan gambarnya yang responsive untuk menambah variasi atau alternative pada penambahan pengaruh caption gambar postingan.
Masih mengandalkan pengaruh hover untuk menciptakan show hide deskripsi atau caption pada gambar postingan responsive ini, sehingga dengan begitu deskripsi atau caption gambarnya akan muncul dikala gambar dihover.
Untuk pola show hide deskripsi gambar responsive ini dapat 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 instruksi di bawah ini dikala akan menyimpan gambar dengan deskripsi di postingan, sebaiknya gunakan gambar dengan dimensi yang besar, contohnya 600px x 300px namun mempunyai size yang kecil semoga tidak membebani loading halamannya.
<div class="imagebox">
<img alt="Show Hide Deskripsi Gambar Postingan Reponsive Show Hide Deskripsi Gambar Postingan Responsive" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvFZZF7gT9ujRi3mq_sIliZqa0QjewtCk-SMfuTSpgVBq0iBq9njn0Pm8od4tWyqOCu6teuIXwMrdrPbCbLFYE4_QGAAbdrFoja_C7o6kmDgUF8WAtDArRKIIw-miJ2vb4Yo6LDdSBoa6D/s1600/windows-10.png" width="600" title="Show Hide Deskripsi Gambar Postingan Responsive"/>
<div class="imgdescription">
Ini yaitu pola deskripsi gambar dengan hover, <a href="http://www.kompiajaib.com/" title="Show Hide Deskripsi Gambar Postingan Responsive">Kompi Ajaib</a> ini yaitu pola 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" menyerupai pola di atas. Di sini Anda dapat 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.
0 Response to "Show Hide Deskripsi Gambar Postingan Responsive"
Posting Komentar