author Ahmad Muhardian

Tutorial Tailwind: Membuat Card dengan Image Zoom-in Saat Hover

Tailwind Card Image Zoom in

Di tutorial Tailwind kali ini, kita akan belajar membuat komponen Card dengan efek image zoom-in saat mouse hover.

Kira-kira preview-nya seperti ini:

Gimana cara buatnya di Tailwind?

Mari kita pelajari..

Membuat File HTML

Buatlah file HTML baru dengan nama card-image-zoom-in.html dan isi seperti ini:

card-image-zoom-in.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Tailwind Card Image Zoom-in</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-gray-200">
    <!-- di sini kita akan menampilkan card -->
  </body>
</html>

Pada kode HTML ini, kita menggunakan Tailwind dari CDN. Ini supaya cepat dan gak ribet setup-setup pakai NPM.

Oke, setelah itu.. lanjut!

Membuat Komponen Card

Kemudian, pada bagian <body>, tambahkan kode HTML seperti ini untuk membuat card.

<div class="p-4 m-8 w-80 bg-white shadow-md rounded-xl">
  <picture class="rounded-lg block">
    <img src="https://picsum.photos/360/240" />
  </picture>

  <h1 class="mt-4 mb-2 text-xl font-bold">Judul Card di sini</h1>
  <p class="text-sm text-gray-600">
    Keterangan pendek tentang card di sini. Biasanya panjangnya dua sampai tiga baris, biar terlihat rapi.
  </p>
</div>

Ini 👆 kode untuk membuat komponen card, kamu bisa atur ukuran lebar, padding, dan margin dengan mengubah class p, m, dan w.

  • p-4 artinya paddingnya sebesar 1rem atau 16px;
  • m-4 artinya marginnya sebesar 1rem atau 16px;
  • w-80 artinya lebarnya sebesar 20rem atau 320px;

Ini bisa kamu lihat di dokumentasi Tailwind.

Oke, sekarang coba buka card-image-zoom-in.html di browser.

Maka hasilnya:

Contoh komponen Card Tailwind

Yay! Sejauh ini kita sudah berhasil membuat komponen Card.

Selanjutnya kita akan membuat efek Zoom-in pada image saat di-hover pointer.

Membuat Efek Zoom-in Image

Untuk membuat effek zoom-in sebenarnya kita hanya perlu memperbesar gambarnya dengan class scale-.

Mari kita coba!

Ubahlah kode komponen card tadi menjadi seperti ini:

<div class="p-4 m-8 w-80 bg-white shadow-md rounded-xl">
  <picture class="rounded-lg block">
    <img
      class="hover:scale-125"
      src="https://picsum.photos/360/240"
    />
  </picture>

  <h1 class="mt-4 mb-2 text-xl font-bold">Judul Card di sini</h1>
  <p class="text-sm text-gray-600">
    Keterangan pendek tentang card di sini. Biasanya panjangnya dua sampai tiga baris, biar terlihat rapi.
  </p>
</div>

Pada kode ini kita melakukan scale image dengan class hover:scale-125. Artinya image akan diperbesar menjadi 125 (1.25) pada saat hover.

Hasilnya:

Imagenya berhasil di-zoom, tapi ini bukan seperti yang kita inginkan.

Kita ingin:

“Ukuran gambarnya tetap, tapi hanya zoom-in pada bagian dalam gambar saja”

Ini bisa kita lakukan dengan menambahkan overflow-hidden pada kontainer gambar, yakni elemen <picture>.

Silakan ubah kodenya menjadi seperti ini:

<div class="p-4 m-8 w-80 bg-white shadow-md rounded-xl">
  <picture class="rounded-lg block overflow-hidden">
    <img
      class="hover:scale-125"
      src="https://picsum.photos/360/240"
    />
  </picture>

  <h1 class="mt-4 mb-2 text-xl font-bold">Judul Card di sini</h1>
  <p class="text-sm text-gray-600">
    Keterangan pendek tentang card di sini. Biasanya panjangnya dua sampai tiga baris, biar terlihat rapi.
  </p>
</div>

Hasilnya:

Mantap 👍

Tapi transisinya terlalu cepat. 🤔

Menentukan Durasi dan Transisi di Tailwind

Biar terlihat smooth transisi efek zoom-in imagenya, kita perlu menambahkan class duration dan ease-in.

  • Class duration digunakan untuk menentukan seberapa lama transisi dilakukan
  • Class ease-in digunakan untuk menentukan kurva timeline dari waktu, selain ease-in ada juga linear, ease-out, ease-in-out.

Mari kita coba!

Silakan ubah kode komponen card menjadi seperti ini:

<div class="p-4 m-8 w-80 bg-white shadow-md rounded-xl">
  <picture class="rounded-lg block overflow-hidden">
    <img
      class="hover:scale-125 ease-in duration-150"
      src="https://picsum.photos/360/240"
    />
  </picture>

  <h1 class="mt-4 mb-2 text-xl font-bold">Judul Card di sini</h1>
  <p class="text-sm text-gray-600">
    Keterangan pendek tentang card di sini. Biasanya panjangnya dua sampai tiga baris, biar terlihat rapi.
  </p>
</div>

Class duration-150 artinya kita ingin menentukan durasi transisi selama 150ms.

Maka hasilnya:

Nah, ini baru mantap-tapp 👍

Live Demo:

Apa Selanjutnya?

Kita sudah berhasil membuat card dengan efek image zoom-in saat hover.

Intinya untuk membuat efek ini, kita butuh class scale, overflow-hidden, duration, dan ease-in.

Sisanya hanya tambahan biar komponennya terlihat lebih elegan 🤭.

Oke, selanjutnya silakan coba modifikasi dan brekreasi sendiri.

Selamat mencoba!