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

5 Maret 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat