Membuat Detail Hover Menggunakan CSS3 Dan jQuery

Detail Hover adalah sebuah efek yang berfungsi untuk menampilkan detail pada suatu product atau pada sebuah gambar ketika mouse kita arahkan pada gambar atau product tersebut, jadi saat kita hover gambar tersebut, maka akan muncul keterangan detail yang lebih lengkap dari gambar tersebut. Biasanya efek detail hover ini banyak digunakan pada website toko-toko online atau e-commerce untuk menampilkan keterangan yang lebih detail pada product yang ada pada halaman website tersebut.

Nah pada tutorial kali ini saya akan mengajarkan bagaimana caranya membuat detail hover menggunakan CSS3 dan jQuery. Dan buat kalian yang ingin mendownload kode tutorial ini secara keseluruhan, kalian bisa klik link download yang ada di paling bawah. Baik kita langsung praktekkan saja ya teman-teman.

Di bawah ini adalah gambar struktur untuk halaman detail hover tersebut.

Untuk CSS detail hover nya seperti gambar di bawah ini.

Dan untuk jQuerynya.

Maka hasil akhirnya akan seperti gambar dibawah ini.

Demo | Download