Cara Membuat Efek Hover Caption Pada Gambar Di Bootstrap 3

Hallo teman-teman DUMET School, pada tutorial kali ini saya akan mengajarkan bagaimana caranya membuat efek hover caption pada gambar di Bootstrap 3. Bootstrap adalah Framework CSS yang berfungsi untuk membuat halaman website menjadi Responsive atau dapat menyesuaikan di berbagai ukuran layar, seperti di Dekstop, Tablet, da Ponsel. Efek hover caption pada gambar maksudnya adalah menampilkan keterangan pada gambar ketika kursor kita arahkan ke gambar tersebut.

Untuk membuatnya sangat mudah sekali, di sini saya akan menggunakan bantuan jQuery dan fungsi Class .thumbnail dan .caption yang ada di Bootstrap. Kita akan langsung coba membuatnya saja ya teman-teman.

Pertama kalian bisa buat struktur HTML pada Bootstrap seperti gambar di bawah ini.

Kemudian kita tambahkan sedikit CSS seperti gambar di bawah ini.

Dan yang terakhir kalian bisa menambahkan jQuery di bawah ini.

Demo | Download