Cara Mudah Membuat Efek Zoom Pada Gambar

Tutorial CSS Sekitar 10 menit Responsif

Efek zoom membuat gambar terasa lebih hidup ketika disentuh, difokuskan, atau diarahkan dengan kursor. Teknik ini cocok untuk galeri, foto produk, portofolio, dan gambar pendukung artikel—asal pembesarannya tetap berada di dalam bingkai.

Pada tutorial ini kita tidak memakai JavaScript untuk animasi dasarnya. CSS menangani efek melalui transform: scale() dan transition, sedangkan JavaScript hanya dipakai pada laboratorium demo agar kamu dapat mengganti desain, skala, dan durasi secara langsung.

Yang akan kamu pelajari

• Memahami hubungan antara scale(), transition, dan overflow.
• Mencoba tiga desain efek zoom yang berbeda.
• Mengatur skala serta durasi melalui live preview.
• Menyalin kode dan memasangnya di postingan Blogger.

Daftar isi

1. Cara kerja efek zoom
2. Laboratorium live preview
3. Tiga desain siap pakai
4. Cara memasang di Blogger
5. Aksesibilitas dan performa

Cara kerja efek zoom gambar

Ada tiga bagian penting. transform mengubah ukuran visual gambar, transition menghaluskan perpindahan dari ukuran normal ke ukuran besar, dan overflow: hidden menahan gambar agar tidak menutupi teks atau elemen di sekitarnya.

transform: scale(1.15)

Gambar tampil 115% dari ukuran awal. Angka 1 berarti 100%, sedangkan 1.15 berarti 115%.

transition: transform .4s ease

Perubahan transform berlangsung selama 0,4 detik. Menentukan propertinya lebih efisien daripada memakai transition: all.

overflow: hidden

Bagian gambar yang membesar dipotong mengikuti bingkai sehingga tidak menimbulkan overflow pada artikel.

Rumus cepat: bingkai menahan ukuran, gambar yang bergerak. Karena itu, pasang overflow: hidden pada pembungkus dan transform pada elemen <img>.

Laboratorium live preview

Pilih desain, atur skala dan durasinya, lalu arahkan kursor atau sentuh gambar. Kode di bawah preview akan berubah mengikuti pengaturanmu dan dapat langsung disalin.

Pilih desain

Skala zoom

1.15×

1.05×1.35×

Durasi animasi

0.40s

0.15s0.90s

Preview langsung

Hover, fokuskan dengan tombol Tab, atau sentuh gambar.

Kode sesuai pengaturanHTML + CSS

Tiga desain efek zoom siap pakai

Ketiganya menggunakan prinsip yang sama, tetapi punya karakter visual dan kegunaan berbeda. Setiap gambar di bawah juga merupakan demo aktif.

01

Zoom lembut

Pilihan paling sederhana untuk gambar artikel. Gambar membesar tanpa dekorasi tambahan, sehingga perhatian tetap tertuju pada isi foto.

Cocok untuk: artikel, tutorial, dan galeri ringan.

.zoom-lembut {
  overflow: hidden;
  border-radius: 14px;
}
.zoom-lembut img {
  display: block;
  width: 100%;
  transition: transform .4s ease;
}
.zoom-lembut:hover img,
.zoom-lembut:focus-within img {
  transform: scale(1.15);
}

02

Zoom dalam bingkai

Bingkai, radius, dan sedikit bayangan membuat gambar terasa seperti kartu editorial. Efek ini bagus untuk menonjolkan gambar penting.

Cocok untuk: foto produk dan highlight konten.

.zoom-bingkai {
  overflow: hidden;
  border: 2px solid #0a7bc1;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
}
.zoom-bingkai img {
  display: block;
  width: 100%;
  transition: transform .45s ease;
}
.zoom-bingkai:hover img,
.zoom-bingkai:focus-within img {
  transform: scale(1.14) rotate(.4deg);
}

03

Zoom dengan overlay

Lapisan informasi muncul saat gambar diperbesar. Desain ini membantu pengunjung memahami bahwa gambar dapat dibuka atau dipelajari lebih dekat.

Cocok untuk: portofolio dan galeri profesional.

Lihat detail gambar

.zoom-overlay {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}
.zoom-overlay img {
  display: block;
  width: 100%;
  transition: transform .4s ease;
}
.zoom-overlay .info {
  position: absolute;
  inset: auto 0 0;
  padding: 18px;
  color: #fff;
  background: rgba(3,18,29,.78);
  transform: translateY(100%);
  transition: transform .4s ease;
}
.zoom-overlay:hover img { transform: scale(1.15); }
.zoom-overlay:hover .info { transform: translateY(0); }

Cara memasang efek zoom di Blogger

Kamu dapat memasangnya langsung di dalam artikel tanpa mengedit tema. Cara ini lebih aman karena efek hanya berlaku pada elemen yang diberi class tertentu.

1. 1
   Buka editor postingan

   Di Blogger, buat atau edit postingan lalu ubah tampilan editor dari Menulis ke HTML.

2. 2
   Tempel struktur gambar

   Gunakan salah satu class desain, misalnya zoom-lembut, pada elemen pembungkus gambar.

3. 3
   Letakkan CSS di bagian bawah artikel

   Tempel kode CSS setelah seluruh HTML artikel. Dengan begitu, struktur konten tetap mudah dibaca dan efek tidak bocor ke postingan lain.

4. 4
   Pratinjau sebelum diterbitkan

   Periksa tampilan desktop dan ponsel, lalu pastikan gambar tidak menutupi teks ketika diperbesar.

Contoh HTMLPostingan

<figure class="zoom-lembut">
  <img src="URL-GAMBAR.jpg"
       alt="Deskripsi gambar">
</figure>

CSS minimumBagian bawah

<style>
.zoom-lembut{overflow:hidden;border-radius:14px}
.zoom-lembut img{display:block;width:100%;transition:transform .4s ease}
.zoom-lembut:hover img{transform:scale(1.15)}
</style>

Hindari selector global seperti img:hover.

Selector global akan memberi efek zoom ke logo, ikon, banner, dan semua gambar lain di blog. Gunakan class khusus agar hasilnya terkendali.

Aksesibilitas dan performa

Aksesibilitas

• Tulis atribut alt yang menjelaskan isi gambar.
• Sediakan efek pada :focus atau :focus-within, bukan hanya :hover.
• Jangan meletakkan informasi penting hanya di dalam overlay.
• Kurangi gerakan untuk pengguna yang memilih prefers-reduced-motion.

Performa

• Animasikan transform, bukan width atau height.
• Tentukan rasio atau ukuran gambar agar halaman tidak bergeser saat gambar dimuat.
• Pakai loading="lazy" untuk gambar yang berada jauh di bawah layar.
• Gunakan skala secukupnya; rentang 1.08–1.20 biasanya sudah nyaman.

Cek sebelum diterbitkan

• Efek berjalan dengan mouse, keyboard, dan sentuhan.
• Tidak ada gambar atau kode yang overflow di layar kecil.
• Durasi animasi terasa halus, tidak terlalu cepat atau lambat.
• Semua gambar memiliki teks alternatif yang jelas.

Referensi resmi

Untuk mempelajari detail sintaks dan perilaku browser, baca dokumentasi fungsi scale() di MDN, properti transition di MDN, dan spesifikasi CSS Transforms dari W3C.

Sekarang kamu punya tiga pilihan desain. Mulailah dari zoom lembut, lalu gunakan bingkai atau overlay ketika gambar memang perlu mendapat perhatian lebih.