Pada kesempatan kali ini saya akan menjelaskan cara membuat hover image scale di HTML Dan CSS. Perlu teman-teman ketahui sebelumnya, untuk membuat efek hover image teman-teman bisa menggunakan efek transform dengan css. Sebelum saya lebih jauh menjelaskan, mungkin ada baik nya jika teman-teman mengetahui terlebih dahulu beberapa property value yang bisa digunakan untuk penggunaan transform tersebut.

Berikut ini beberapa property value transform yang bisa teman-teman gunakan, seperti dii bawah ini :

  • translate()
    translate() adalah fungsi yang bisa teman-teman gunakan untuk memindahkan suatu element. Disini teman-teman bisa menentukan posisi tersebut dengan memberikan niai pada parameter x untuk jarak samping dan parameter y untuk jarak tinggi dari element tersebut.
  • scale()
    scale() adalah fungsi yang bisa teman-teman gunakan untuk melebarkan atau menjauhkan suatu element dengan menambah atau mengurangi ukuran element tersebut.
  • skewX()
    Skew() adalah fungsi yang bisa teman-teman gunakan untuk memiringkan suatu element dengan mengatur setiap nilai pada sumbu x.
  • skewY()
    Skew() adalah fungsi yang bisa teman-teman gunakan untuk memiringkan suatu element dengan mengatur tiap nilai pada sumbu y.
  • rotate()
    rotate() adalah fungsi yang bisa teman-teman gunakan untuk memutar suatu element. Dan untuk memutar element tersebut teman-teman bisa menentukan nilai yang ada di dalam parameter fungsi rotate tersebut. Dan untuk nilai tersebut bisa teman-teman tentukan dengan cara memberikan nilai derajat putar.
    matrix()
    matrix() adalah fungsi yang bisa teman-temanĀ  gunakan untuk menggabungkan beberapa transform lainnya, contohnya seperti menggabungkan rotate(), skew() scale() menjadi satu kesatuan.

Sedangkan untuk contoh pembahasan yang akan saya berikan di sini, akan saya berikan contoh dengan menggunakan property value transform scale3d(). Untuk membuatnya langsung saja, teman-teman bisa ikuti langkah-langkah yang saya berikan disini.

Berikut Langkah-Langkahnya :

  • Teman-teman buat terlebih dahulu satu buah file dengan nama index.html
  • Jika sudah temsan-teman bisa ketikan kode seperti di bawah ini :

  • Jika sudah teman-teman save terlebih dahulu file tersebut.

Untuk pembahasan selanjutnya, akan saya jelaskan cara membuat hover image scale di HTML Dan CSS pada sesi berikutnya, semoga bermanfaat.