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 membat card.

<div class="p-4 m-8 w-80 bg-white shadow-md rounded-xl">
  <picture class="rounded-lg block">
    <img 
      src="https://placeimg.com/360/240/tech"
    />
  </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://placeimg.com/360/240/tech"
    />
  </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>.

Silahkan 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://placeimg.com/360/240/tech"
    />
  </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!

Silahkan 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://placeimg.com/360/240/tech"
    />
  </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 silahkan coba modifikasi dan brekreasi sendiri.

Selamat mencoba!

Baca Juga ini

Proses Migrasi Template Petani Kode dari Bootstrap ke Tailwind

Proses Migrasi Template Petani Kode dari Bootstrap ke Tailwind

Proses pembuatan ulang template Petani Kode menggunakan TailwindCSS dan alasannya mengapa sih menggunakan Tailwind

Cara Menggunakan Tailwind CSS untuk Membuat Tema Hugo

Cara Menggunakan Tailwind CSS untuk Membuat Tema Hugo

Pelajari gimana cara menggunakan TailwindCSS untuk membuat tema Hugo

Tutorial CSS: Cara Mengatur Font di CSS

Tutorial CSS: Cara Mengatur Font di CSS

Pada tutorial ini, kita akan belajar cara menggunakan dan mengatur font di CSS. Mulai dari mengatur ukuran font, mengatur jenis font, dan masih banyak lagi.

Tutorial CSS: Text Formatting di CSS

Tutorial CSS: Text Formatting di CSS

Pada tutorial ini kita akan belajar tentang properti CSS untuk mengatur teks. Seperti text-align, text-decoration, text-shadow, dan sbagainya.

Tutorial CSS: Menggunakan Background di CSS

Tutorial CSS: Menggunakan Background di CSS

Pada tutorial kita akan belajar tentang properti background di CSS untuk membuat background dengan warna dan gambar.

Tutorial CSS: Sintaks Dasar CSS yang Harus Dipahami

Tutorial CSS: Sintaks Dasar CSS yang Harus Dipahami

Pelajari struktur dasar sintaks CSS agar kamu bisa menulis kode CSS dengan benar.