Gambar yang baru keluar dari tag <img> hampir selalu tampil mentah: bersudut tajam, menempel pada teks tanpa jarak, dan berpenampilan sama persis di semua website. CSS memperlakukan gambar sebagai kotak yang boleh kita hias sepenuhnya — dibulatkan, diberi bayangan, dibingkai, dibuat transparan, hingga warnanya diubah lewat filter. Chapter ini menata fondasi visual section Images dan Media: property dekoratif yang paling sering dipakai pada gambar, cara memberi caption yang semantik dengan figure dan figcaption, serta satu demo galeri thumbnail untuk melihat semuanya bekerja bersama.
Gambar adalah Replaced Element #
Elemen <img> termasuk replaced element: kontennya berasal dari luar dokumen (berkas gambar), bukan digambar oleh CSS. Konsekuensinya ada dua sisi. Sisi dalam gambar — piksel foto itu sendiri — tidak bisa kita ubah dengan CSS biasa; tetapi kotak yang menampungnya bisa distyle penuh, persis seperti <div> biasa. Property dekoratif yang paling sering dipakai:
| Property | Efek pada gambar |
|---|---|
border-radius | membulatkan sudut; 50% menghasilkan lingkaran |
box-shadow | bayangan lembut yang mengangkat gambar dari latar |
border | bingkai di sekeliling gambar |
opacity | transparansi seluruh elemen, termasuk isinya |
filter | efek warna: grayscale, sepia, brightness, dan lainnya |
Dekorasi Dasar: Radius, Bingkai, dan Bayangan #
Kombinasi tiga property berikut adalah “pakaian default” foto profil di hampir setiap website:
.foto-profil {
border-radius: 50%;
border: 3px solid #1f6f54;
box-shadow: 0 4px 12px rgb(0 0 0 / 0.18);
}Pasang ketiga deklarasi itu pada foto persegi mana pun:
Mari kita bedah:
border-radius: 50%: nilai persen dihitung dari sisi kotak. Pada kotak persegi hasilnya lingkaran sempurna; pada kotak persegi panjang hasilnya elips.border: 3px solid #1f6f54: bingkai ikut mengikuti bentuk radius, sehingga tetap melengkung mulus di lingkaran.box-shadow: 0 4px 12px rgb(0 0 0 / 0.18): geser horizontal 0, geser vertikal 4px, blur 12px, warna hitam dengan opasitas 18%. Bayangan tidak menambah ruang layout, jadi tata letak di sekitarnya tidak bergeser.
Untuk foto lanskap yang cukup dibulatkan sudutnya, nilai border-radius: 12px sudah memberikan kesan lembut tanpa mengubah bentuk aslinya.
Mengubah Suasana dengan filter #
Property filter menerapkan efek grafis pada gambar tanpa menyentuh berkas aslinya. Fungsinya ditulis berurutan dan dieksekusi satu per satu:
.foto-arsip {
filter: grayscale(85%) sepia(20%);
}Terapkan pada foto yang sama, dengan dan tanpa filter:
| Fungsi filter | Efek | Rentang nilai umum |
|---|---|---|
grayscale(x) | menghapus warna | 0%–100% |
sepia(x) | nuansa cokelat foto klasik | 0%–100% |
brightness(x) | menerangkan (>1) atau menggelapkan (<1) | 0–2 |
contrast(x) | mempertegas atau meredam kontras | 0–2 |
saturate(x) | menaikkan atau menurunkan kepekatan warna | 0–2 |
hue-rotate(deg) | memutar rona warna pada roda warna | sudut apa pun |
blur(px) | mengaburkan tepi | panjang |
Caption Semantik dengan figure dan figcaption #
Pasangan gambar dan keterangan yang melekat padanya paling tepat dibungkus <figure>:
<figure class="galeri-item">
<img src="pantai-selatan.svg" width="320" height="200" alt="Gelombang laut menyapu pantai berpasir putih">
<figcaption>Pagi di Pantai Selatan, Februari 2026</figcaption>
</figure>.galeri-item {
margin: 0; /* reset margin default figure */
border-radius: 12px;
overflow: hidden; /* gambar dan caption ikut sudut membulat */
background: #fff;
box-shadow: 0 2px 10px rgb(0 0 0 / 0.1);
}
.galeri-item img {
display: block; /* hapus celah tipis di bawah gambar */
}
.galeri-item figcaption {
padding: 10px 14px;
font-size: 0.85rem;
color: #52606d;
}Dua detail penting: display: block pada img menghilangkan celah tipis peninggalan perilaku inline, dan overflow: hidden memastikan sudut gambar tidak menonjol keluar dari radius kartu — teknik yang akan kita pakai ulang di chapter Gambar dalam Card.
Demo berikut merangkai semuanya: thumbnail ber-radius dan berbayangan, caption di bawahnya, serta filter grayscale yang hilang saat kursor berada di atas gambar:
Arahkan kursor ke thumbnail tengah dan kanan: warna kembali normal seketika. Perpindahan yang mendadak ini nantinya bisa dibuat halus dengan transition — materi section Transitions dan Animations. Ingat juga bahwa :hover hanya bekerja pada perangkat ber-kursor; efek informatif tidak boleh hanya hidup di hover.
Kesalahan Umum #
| Kesalahan | Akibat | Perbaikan |
|---|---|---|
border-radius: 50% pada foto persegi panjang | bentuk menjadi elips, bukan lingkaran | bungkus foto dalam kotak persegi, atau pakai nilai panjang |
lupa display: block pada img di dalam kartu | celah tipis di bawah gambar | tambahkan display: block |
menurunkan opacity agar teks lain menonjol | isi gambar ikut pudar semua | gunakan warna rgb(... / alpha), bukan opacity elemen |
Ringkasan #
Gambar adalah replaced element yang kotaknya bisa kita hias bebas: radius untuk sudut, shadow untuk kedalaman, border untuk bingkai, dan filter untuk suasana warna. Struktur figure + figcaption memberi tempat yang semantik bagi pasangan gambar dan keterangannya. Fondasi visual ini baru satu sisi cerita — chapter berikutnya membahas sisi ukuran: mengapa gambar punya ukuran asli, dan bagaimana kita mengendalikannya tanpa merusak proporsi.