Membuat Floating Caption Gambar Artikel Blog

Membuat Floating Caption Gambar Artikel - Caption adalah sebuah keterangan yang terdapat dibagian bawah sebuah gambar dan biasanya caption ini ditulis secara manual untuk memberikan penjelasan pada gambar tersebut. Dan melalui artikel ini, saya akan sedikit memodifikasi caption tersebut dengan memberikan efek Hover, maksudnya, Sebuah keterangan pada gambar akan muncul jika gambar tersebut di sorot dengan pointer mouse

Dengan membuat floating caption atau efek hover tersebut maka akan menambah kesan yang menarik pada sebuah gambar dan juga akan mengurangi penggunaan tempat dalam menulis sebuah keterangan. Berikut beberapa bentuk contoh caption yang memberikan penjelasan pada sebuah gambar atau pada gambar artikel ini juga terdapat caption

Gambar dengan Caption manual

Membuat Floating Caption Gambar Artikel: Pada gambar terdapat beberapa contoh tampilan dari sebuah gambar yang telah memiliki keterangan(Caption) pada gambar tersebut atau seperti yang terlihat pada gambar artikel ini

Gambar dengan Floating Caption
Silahkan sorot pada kedua gambar dibawah ini dengan menggunakan mouse

• Ini adalah Keterangan Gambar (caption) yang muncul jika gambar artikel di sorot oleh pointer mouse. Membuat caption ini tidak diperlukan kode script tapi cukup menggunakan kode CSS

Gambar dengan Floating Caption berfungsi untuk memberikan keterangan agar Gambar atau Artikel blog tidak di copy paste

• Dilarang Keras Menyalin Gambar atua Artikel ini Dalam Bentuk dan Dengan Cara Apapun Tanpa Seizin dari Penulis

Bagaimana tertarik untuk membuat floating caption gambar artikel blog tersebut? Berikut kode CSS untuk membuat floating caption seperti demo diatas

.gbr_img {
width:500px;
height:274px;
overflow:hidden;
}
.gbr_img img {
width:100%;
}
.gbr_img .caption {
width:100%;
height:125%;
margin-top:-99%;
padding:1em 0;
position:relative;
z-index:2;
}
.gbr_img .caption ul {
list-style:none;
float:left;
width:100%;
padding:0;
margin:100% 0;
}
.gbr_img .caption ul li {
display:block;
float:left;
padding:10px;
text-align:left;
color:transparent;
background:#ecf0f1;
box-shadow: inset 0 2px 0 rgba(255,255,255,.4),
inset 0 -1px 0 rgba(0,0,0,.4);
transition:transform .4s ease .5s, opacity .25s ease .5s;
transform:translateZ(0);
opacity:0;
}
.gbr_img .caption ul li span {
color:#444444;
font-size:11px;
line-height:1;
}
.gbr_img ul li:hover span {
color:#ecf0f1;
}
.gbr_img:hover ul li {
opacity:1;
transform:translateY(-11.5em) translateZ(0);
}
.gbr_img ul li:hover {
background:#2c3e50;}

Kode HTML

<div class="gbr_img">
  <img src="ganti-dengan-url-gambar-sobat.png" />
  <div class="caption">
    <ul>
      <li><span>Tulis Keterangan Disini</span></li>
    </ul>
  </div>
</div>

Mudah bukan? Silahkan jika ingin membuat floating caption pada gambar artikel blog sobat agar menjadi lebih menarik. Cara pasangnya bagaimana? Sesuaikan saja kode dengan kode CSS gambar artikel yang ada pada kode template blog sobat :)