Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Membuat Keterangan Gambar (Caption) dalam Gambar

Custom image caption

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.

caption

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>
Ujicoba Sendiri!

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 {
    display: flex;
    flex-flow: column;
    max-width: 500px;
    max-height: 250px;
    margin: auto;
    position:relative;
}

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;
}

CSS Lengkap

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>
Ujicoba Sendiri!

Semoga bermanfaat.

16 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. kang, request cara membuat number post seperti di median UI yang ada garis mengikuti jumlah tulisan atau artikelnya itu gimana kang..? Pengen tau cara buatnya gimana.
    1. ganti template ya mas... download box juga harus tambah cssnya mas.. biar ga aneh
    2. Iya mas, rada kesel sama median UI terbaru, karena ada script buat licensenya luamyan mengganggu buat saya pribadi.
    3. kayaknynya tutorial numberpost udah ga perlu ya.. soalnya saya liat di blognya sudah teraplikasi
    4. Iya kang, awalnya bingung buatnya, tapi setelah saya pelajari lagi cuma modal CSS doang. hihi, Keren mas maki.
    5. Eh kang, tutor yang menampilkan jumlah views di dekat selamat pagi itu..?
    6. bisa pake ini kang https://www.kang-ismet.com/2023/05/realtime-view-counter-dengan-firebase.html
  2. Seharusnya CSS img alt nya aja yg di buat kang. Jadi gak perlu menambahkan kode baru lagi pada saat pemasangan gambarnya.

    Kayak di template linkmagz punya massugeng
    1. maaf saya blom ngerti nih, maksudnya alt dibuat jadi caption otomatis gitu? apa gimana? saya liat di template linkmagz alt tidak jadi caption
  3. Kang request tutorial Carousel (Random Posts), besar di bawah header kaya punya igniflex. Ditunggu tutorialnya kang.

    Kalo susah untuk random post. Bisa pakai postingan per label aja kang. Terima kasih
    1. kayaknya salah satu fitur premiumnya nya itu, saya pernah ujicoba pake tiny slider.. bisa ko
    2. Bisa buatin tutorialnya kang
  4. kang boleh request tutorial cara buat recent comment kaya gini atuh https://elfsight.com/testimonials-slider-widget/
    1. enaknya pake Bootsrap mas... dijamin hehe
  5. Sebenarnya keren juga tampilannya
    tapi jika gambarnya banyak, aduh lelah juga tu
    ada kode yang lebih simple kagak ya
    1. kalau udah terbiasa ngga ribet sih, siapin contekan aja ketika mau upload image :)
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.