Apps Artificial Intelligence CSS DevOps Go JavaScript Laravel Linux MongoDB MySQL PHP Python Rust Vue

Membuat Efek Zoom Saat Hover dengan Tailwind CSS

1 min read .
Updated on
Membuat Efek Zoom Saat Hover dengan Tailwind CSS

Kadang halaman web butuh sentuhan kecil biar lebih hidup. Salah satunya efek zoom saat kursor diarahkan ke gambar. Dengan Tailwind CSS, kita bisa bikin itu super gampang—tanpa nulis CSS manual panjang-panjang.

Yuk, kita coba bareng!

1. Struktur HTML

Ini contoh dasar pakai Tailwind. Cukup beberapa class, efek zoom langsung jadi:

<div class="relative">
  <img 
    src="https://picsum.photos/500/300.webp" 
    alt="Image" 
    class="hover:scale-125 transition-transform duration-300 ease-in-out">
</div>

2. Apa fungsi class Tailwind?

  • relative → bikin div jadi posisi relatif. Nggak ngaruh langsung ke zoom, tapi penting kalau mau tambahin elemen lain di atas gambar nanti.
  • hover:scale-125 → gambar membesar 125% pas kursor diarahkan.
  • transition-transform → biar perubahannya halus, nggak “jumpscare.”
  • duration-300 → animasinya berlangsung 300ms (0,3 detik).
  • ease-in-out → transisi mulai pelan, di tengah agak cepat, lalu melambat lagi di akhir. Lebih enak dilihat.

3. Mau lebih seru? Bisa di custom

  • Skala lebih besar:

    class="hover:scale-150 transition-transform duration-300 ease-in-out"

    Sekarang gambarnya membesar 150%.

  • Ubah durasi: duration-500 bikin transisi setengah detik, lebih kalem.

  • Mainin easing: Mau transisi linear (kecepatan stabil) atau ease-out (cepat di awal, lambat di akhir)? Tinggal ganti kelasnya.

4. Kapan dipakai?

Efek zoom ini cocok banget untuk:

  • Galeri foto → biar orang bisa ngintip detail gambar.
  • Halaman produk toko online → kasih efek interaktif pas user hover ke produk.
  • Portofolio → bikin karya desain/foto lebih menonjol.

5. Penutup

Tailwind bikin efek kecil kayak gini jadi gampang banget. Cuma dengan beberapa kelas, tampilan web bisa jadi lebih interaktif tanpa ribet nulis CSS manual.

Coba sendiri, utak-atik skalanya, dan lihat gimana efek sederhana ini bisa bikin halaman terasa lebih hidup.

CSS Tailwind

Lihat Juga

Bikin Galeri Masonry Keren dengan Efek Zoom (Tailwind CSS)
Updated on
Bikin Galeri Masonry Keren dengan Efek Zoom (Tailwind CSS)
Pernah lihat galeri foto yang tampilannya rapi, tapi nggak monoton—gambar disusun kayak dinding bata (masonry) dan pas di-hover ada efek zoom yang halus? Ternyata gampang banget bikinnya pakai Tailwind CSS. Di tulisan ini, saya bikin galeri responsif pakai layout masonry plus efek zoom pas kursor diarahkan ke gambar. Yuk langsung coba! 1. Struktur HTML Galeri Cukup beberapa div dengan class Tailwind, galeri sudah jadi: Copy <div class="columns-1 sm:columns-2 md:columns-3 lg:columns-4 gap-4 p-4"> <div class="mb-4 overflow-hidden rounded-lg"> <img src="https://picsum.photos/500/700.webp" alt="Image 1" class="w-full hover:scale-110 transition-transform duration-300 ease-in-out"> </div> <div class="mb-4 overflow-hidden rounded-lg"> <img src="https://picsum.photos/500/500.webp" alt="Image 2" class="w-full hover:scale-110 transition-transform duration-300 ease-in-out"> </div> <!-- Tambahkan gambar lain sesuai kebutuhan --> </div> 2. Apa arti class? columns-1 sm:columns-2 md:columns-3 lg:columns-4 → jumlah kolom berubah sesuai ukuran layar (1 di HP, 2 di tablet, dst). gap-4 → jarak antar kolom. p-4 → kasih padding biar galeri nggak mepet ke pinggir. mb-4 → jarak antar item. overflow-hidden + rounded-lg → bikin gambar rapi, ujung melengkung, dan zoom-nya nggak keluar batas. hover:scale-110 + transition-transform duration-300 ease-in-out → bikin efek zoom halus pas di-hover. 3. Bisa diutak-atik Jumlah kolom: ubah columns- sesuai kebutuhan. Misalnya, mau 5 kolom di layar besar, pakai xl:columns-5. Zoom lebih besar: ganti hover:scale-110 jadi hover:scale-125 atau hover:scale-150. Transisi lebih kalem: ganti duration-300 jadi duration-500. 4. Kapan cocok dipakai? Galeri foto pribadi atau portofolio. Showcase produk di toko online. Landing page yang butuh tampilan visual interaktif. 5. Penutup Dengan Tailwind, bikin galeri masonry + efek zoom tuh cuma butuh beberapa baris HTML. Hasilnya responsif, interaktif, dan enak dilihat di semua ukuran layar.
CSS Tailwind
chevron-up