Show Hide Deskripsi Gambar Postingan Responsive

Show Hide Deskripsi Gambar Postingan Responsive

Bola Hero Gawai

Show Hide Deskripsi Gambar Postingan Responsive

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.

Show Hide Deskripsi Gambar

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="http://4.bp.blogspot.com/-wFt-q2gHZ5Q/VCyqvCFVIZI/AAAAAAAAd30/SnqPim5wz9k/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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×