Membuat Keterangan Gambar (Caption) dalam Gambar

Tutorial kali ini adalah bagaimana membuat caption dalam gambar, di request oleh Mbak Mia Meliala di Forum untuk contoh hasilnya seperti gambar di bawah ini.

Membuat Caption Standar

Untuk membuat Caption standar, bisa menggunakan figure dan figcaption, sebagai contoh kode HTML nya seperti ini

<figure>
  <img src="https://tutorial.kang-ismet.com/img/pelabuhanratu.webp" alt="Pelabuhanratu" style="width:100%">
  <figcaption>Pelabuhan Ratu - Sukabumi.</figcaption>
</figure>

Membuat Caption Dalam Gambar

Pada kode HTML sebelumnya, posisi captiom berada dibawah gambar sebelah kiri. untuk membuat Caption didalam gambar, maka perlu menggunakan CSS. Untuk lebih memahaminya, biar tidak langsung copas, saya jelaskan secara singkat.

figure sebagai wadah

Kunci utama dari wadah ini harus menggunakan position:relative, misalkan kita buat CSSnya seperti ini

<figure>
  <img src="https://tutorial.kang-ismet.com/img/pelabuhanratu.webp" alt="Pelabuhanratu" style="width:100%">
  <figcaption>Pelabuhan Ratu - Sukabumi.</figcaption>
</figure>

img buat responsif

Supaya tidak melebihi wadah, yaitu figur, maka tambahkan kode CSS

img {
    width:100%;
}

atau boleh spesifik seperti ini

 figure img {
    width:100%;
}

Posisikan figcaption

Karena kita akan memposisikan caption di pojok kanan, maka kode CSSnya seperti ini

figcaption {
    background-color: rgba(0, 0, 0, .5);
    color: #fff;
    font: italic smaller sans-serif;
    padding: 5px 10px;
    position:absolute;
    bottom:0;
    right:0;
    border-top-left-radius: 7px;
}

figure {
    display: flex;
    flex-flow: column;
    max-width: 500px;
    max-height: 250px;
    margin: auto;
    position:relative;
}

img {
    width:100%;
}

figcaption {
    background-color: rgba(0, 0, 0, .5);
    color: #fff;
    font: italic smaller sans-serif;
    padding: 5px 10px;
    position:absolute;
    bottom:0;
    right:0;
    border-top-left-radius: 7px;
}

Kode HTML

Untuk kode HTML, sama saja seperti Caption Standar, yaitu seperti ini. (Simpan kode ini dimana gambar akan dimunculkan, misal di postingan)

<figure>
    <img alt="pelabuhanratu" src="https://tutorial.kang-ismet.com/img/pelabuhanratu.webp">
    <figcaption>Pelabuhan Ratu - Sukabumi</figcaption>
<figure>

Semoga bermanfaat.