Gambar dalam Card

Kartu produk, kartu artikel, kartu profil — hampir semua antarmuka modern dibangun dari satu komponen yang sama: gambar di atas, teks di tengah, aksi di bawah. Sejauh ini kita sudah mengumpulkan semua bahannya: aspect-ratio untuk area media yang seragam, object-fit: cover untuk mengisi tanpa distorsi, border-radius dan box-shadow untuk tampilan, serta figure untuk struktur. Chapter ini merakit semuanya menjadi satu pola kartu yang utuh dan siap dipakai, lengkap dengan efek zoom halus ketika kursor mendekat.

Anatomi Kartu #

Kartu yang sehat terbagi menjadi tiga wilayah dengan tugas yang tidak saling mencampur:

Kode Lengkap: Tiga Wilayah dalam Satu Kartu #

Markup-nya menempatkan tiga wilayah sebagai anak langsung dari article:

<article class="kartu-produk">
  <div class="kartu-media">
    <img src="kopi-gayo.svg" width="400" height="300" alt="Kemasan kopi Gayo di atas meja kayu">
  </div>
  <div class="kartu-body">
    <h3>Kopi Gayo</h3>
    <p>Arabika panggang medium dengan aroma herbal dan keasaman cerah.</p>
  </div>
  <div class="kartu-footer">
    <span class="kartu-harga">Rp85.000</span>
    <button type="button">Tambah ke Keranjang</button>
  </div>
</article>

Lalu CSS-nya, wilayah demi wilayah:

.kartu-produk {
  border: 1px solid #e2e0d5;
  border-radius: 12px;
  overflow: hidden;            /* sudut gambar ikut radius kartu */
  background: #fff;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.08);
}
.kartu-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;            /* wadah potongan efek zoom */
}
.kartu-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;           /* isi rasio 4:3 tanpa distorsi */
}
.kartu-body {
  padding: 14px 16px;
}
.kartu-body h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}
.kartu-body p {
  margin: 0;
  font-size: 0.9rem;
  color: #52606d;
}
.kartu-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid #eee9dd;
}
.kartu-harga {
  font-weight: 700;
  color: #14503a;
}

Tiga keputusan di sini patut dicatat: aspect-ratio: 4 / 3 pada .kartu-media menjamin semua kartu punya tinggi media yang sama meski gambarnya berbeda-beda; pasangan width: 100% + height: 100% + object-fit: cover pada img mengisi wadah itu tanpa distorsi; dan atribut width/height di HTML menjaga rasio cadangan sebelum CSS aktif.

Memotong Radius: overflow hidden atau Radius Ganda #

Gambar di pojok atas kartu menonjol keluar dari radius 12px dan merusak kesan membulat. Ada dua penyelesaian yang lazim:

Pola di atas memakai overflow: hidden di dua tempat: pada kartu agar isi tidak menonjol melewati radius, dan pada .kartu-media untuk alasan berikutnya.

Efek Zoom saat Hover — Cuplikan dari Section Transitions #

Dengan wadah media yang sudah memotong, efek zoom cukup dua aturan:

.kartu-media img {
  transition: transform 0.35s ease;
}
.kartu-produk:hover .kartu-media img {
  transform: scale(1.06);
}

Catatan jujur: transition dan transform baru dibahas tuntas di section Transitions dan Animations; untuk sekarang cukup pahami perannya — transform: scale() memperbesar gambar tanpa menggeser elemen lain, dan transition membuat perubahannya bergerak halus alih-alih pindah mendadak. Karena efek ini dekoratif, tidak masalah bila tidak muncul di perangkat layar sentuh yang tidak mengenal :hover.

Tiga kartu berikut memakai markup dan CSS yang sama persis — hanya konten dan gambarnya yang berbeda; arahkan kursor ke salah satunya untuk melihat efek zoom halusnya:

Coba bayangkan ketiga foto itu berbeda rasio — 16:9, persegi, potret — dan lihat bahwa rasio 4:3 tetap membuat ketiga kartu rata; itulah kontribusi aspect-ratio dan object-fit pada komponen nyata.

Ringkasan #

Kartu adalah titik temu seluruh bahan section ini: aspect-ratio membentuk area media yang seragam, object-fit: cover mengisinya tanpa distorsi, overflow: hidden menjaga sudut dan potongan zoom, dan tiga wilayah media-body-footer menjaga isi tetap tertata. Pola ini layak disimpan sebagai templat pribadi, karena hampir semua proyek web memakainya dalam satu atau bentuk lainnya. Ada satu pendekatan gambar yang belum kita sentuh: menaruh gambar bukan sebagai konten, melainkan sebagai latar elemen — topik chapter berikutnya.