Cara membuat caption mengambang di atas gambar seperti watermark

Teks keterangan gambar atau nama resminya adalah caption gambar merupakan teks yang menyertai gambar yang fungsinya adalah untuk memberitahu pembaca mengenai informasi gambar.

Caption gambar sering digunakan untuk menjelaskan tentang foto, baik itu tentang peristiwa yang terjadi dalam foto, maupun informasi tentang sumber foto dan lain sebagainya. Trik ini juga umum digunakan oleh situs web berita.

Caption gambar di postingan blog bisa kita modifikasi tampilannya supaya menarik atau bahkan supaya memiliki fungsi yang bermanfaat bagi pengunjung yang melihatnya.

Sebagai contoh, di sini Blogizty akan memberitahukan cara memodifikasi elemen caption gambar supaya - selain tampak indah juga memiliki fungsi yang bermanfaat.

Catatan

• Trik modifikasi ini adalah - membuat caption mengambang di atas gambar sehingga seolah-olah teks keterangan tampak menempel di gambar seperti watermark.

• Akan terdapat 2 hasil di mana salah satunya telah ditambahkan fungsi klik, dan kamu boleh pilih salah satu yang sesuai dengan selera.

• Tampilan mungkin berbeda setelah diterapkan di blog kalian sebab itu tergantung dari aturan CSS bawaan masing-masing template sehingga tinggal disesuaikan saja aturan CSS-nya.

Membuat caption mengambang di atas gambar seperti watermark

Baik, hal pertama yang perlu kita perhatikan adalah penempatan gambar saat membuat postingan.

Di Blogger, setelah kita menambahkan gambar ke postingan, umumnya gambar akan di-wrap secara otomatis ke dalam elemen <div class="separator"> sehingga kita perlu mengganti wrapper gambar tersebut dengan milik kita sendiri di mana dalam hal ini kita akan menggunakan wrapper dengan className image-post dan juga menambahkan elemen sebagai pembungkus caption sehingga hasilnya akan menjadi seperti ini:

<div class="image-post">
<img alt="" src="/sumberGambar.jpg">
<span class="image-caption">
Teks keterangan gambar
</span>
</div>

Atau boleh juga disertai dengan url gambar seperti ini:

<div class="image-post">
<a href="/url-gambar">
<img alt="" src="/sumberGambar.jpg">
</a>
<span class="image-caption">
Teks keterangan gambar
</span>
</div>

Catatan

Elemen gambar sebaiknya tidak berisi attribute seperti width, height dan sebagainya karena menurut W3C itu tidak sesuai dengan format HTML5. Sementara menurut beberapa web developer, itu berpengaruh buruk terhadap SEO. Sehingga untuk mengubah tampilan elemen apapun sebaiknya dilakukan melalui CSS.

Setelah itu terapkan kode CSS di bawah ini ke bagian CSS di editor template Blogger. Silakan pilih satu yang sesuai dengan kebutuhan.

1. Caption mengambang di atas gambar

Kode CSS ini akan membuat teks keterangan mengambang di atas gambar seperti halnya watermark.

Script CSS

.image-post {position:relative;margin:10px 0}
.image-post img {width:100%;height:auto;display:block}
.image-caption {background:rgba(0,0,0,0.5);color:#fff;position:absolute;right:0;bottom:0;left:0;padding:8px}

2 Caption mengambang di atas gambar dengan fungsi klik

Tampilan kedua ini ditambahkan dengan fungsi klik yang digenerate oleh JavaScript yang fungsinya adalah untuk menyembunyikan dan menampilkan caption dengan mengklik pada gambar. Jadi, ketika gambar diklik maka caption secara perlahan akan hilang. Kemudian ketika gambar diklik lagi maka caption akan muncul kembali.

Sehingga jika kamu ingin menggunakan tampilan ini maka gambar tidak boleh disertai URL seperti script HTML kedua di atas. Atau dengan kata lain tidak boleh menambahkan tag anchor <a href="/urlGambar> karena di sini kita menjalankan klik.

Sebaliknya, jika memang terpaksa harus menggunakan URL maka kita bisa menambahkannya di caption seperti contoh berikut:

<span class="image-caption">
Teks keterangan gambar, sumber: <a href="/urlGambar">Blogizty</a>
</span>

Script CSS

Salin dan tempelkan kode ini di bagian CSS melalui editor template Blogger.

.image-post {position:relative;margin:10px 0;}
.image-post img {width:100%;height:auto;display:block;}
.image-caption {background:rgba(0,0,0,.5);color:#fff;position:absolute;right:0;bottom:0;left:0;padding:8px}
.fade-in {opacity:1;animation:gizfadein 1s .0s ease}
.fade-out {opacity:0;animation:gizfadeout 1s .0s ease}
@keyframes gizfadein {0%{opacity:0}100%{opacity:1}}
@-webkit-keyframes gizfadein {0%{opacity:0}100%{opacity:1}}
@-moz-keyframes gizfadein {0%{opacity:0}100%{opacity:1}}
@keyframes gizfadeout {0%{opacity:1}100%{opacity:0}}
@-webkit-keyframes gizfadeout {0%{opacity:1}100%{opacity:0}}
@-moz-keyframes gizfadeout {0%{opacity:1}100%{opacity:0}}

Script JavaScript

Salin dan tempelkan kode ini di atas tag penutup body </body> atau sejenis &lt;!--</body>--&gt;&lt;/body&gt;.

<script>
//<![CDATA[
var imgPost=document.querySelectorAll('.image-post');for(var i=0;i<imgPost.length;i++){imgPost[i].addEventListener('click',function(){imgCap=this.querySelector('.image-caption');stat=imgCap.classList;!this.querySelector('.fade-out')?(stat.remove('fade-in'),stat.add('fade-out')):(stat.remove('fade-out'),stat.add('fade-in'))})}
//]]>
</script>

Simpan template dan lihat hasilnya. Namun perlu diingat bahwa pada pratinjau post Blogger, biasanya beberapa script tidak dapat dijalankan sehingga kita perlu mengetesnya secara langsung dengan melihat postingan.

Bila tampilan kurang sesuai atau tidak memuaskan maka silakan ubah atau tambahkan CSS-nya oleh sendiri.

© Blogizty