Kalau biasanya kita membuat image over menggunakan css, pada tutorial kali ini kita akan menampilkan atau membuat animasi efek over pada image menggunakan event mouse-over. Cara ini cukup mudah dan sederhana tidak terlalu sulit. kalau pada tutorial sebelumnya kita telah  Membuat Background Image Animation dengan jQuery bagi yang belum membaca silahkan klik tautan tersebut.

Script untuk Menampilkan Image Over

Script di bawah ini akan kita gunakan untuk menampilkan image over. Dalam contoh ini, saya menggunakan jQuery dan CSS untuk menampilkan even teks pada gambar. Saya menggunakan fungsi jQuery slideToggle () untuk membuat efek teks muncul pada image.

Script CSS untuk Mengatur Tampilan Image

Setelah kita berhasil membuat tampilan HTML image maka kita akan merapikan tampilan dari HTML tersebut, berikut ini fungsi CSS untuk membuat pengaturan pada tampilan image dan  efek over yang di timbulkannya.

 

Script jQuery Slide Toggle

Script dibawah ini kita gunakan untuk menampilkan event hover pada image, dimana ketika ada kursor yang berada di atas image maka akan muncul efek background dan teks muncul dari bawah image.

Output dari script di atas,

Cara Membuat Image Over dengan jQuery slideToggle

Oke itulah tadi pembahasan dari saya tentang Cara Membuat Image Over dengan jQuery slideToggle semoga bermanfaat.