Jika kalian ingin membuat website toko online, konten website kalian biasanya akan banyak mengandung gambar produk-produk yang ingin dipasarkan. Otomatis konten tersebut akan penuh  dengan blok gambar berbagai macam produk. Lalu jika kalian ingin menaruh informasi tentu akan menambah sesak pada konten website kalian. Untu mengatasi hal tersebut biasanya akan di akali oleh informasi yang di sembunyikan sementara, yaitu salah satunya bisa menggunakan hover.

Sesuai dengan pembahasan diatas, kali ini kita akan mencoba membuat hover caption pada image di Bootstrap. Caption ini biasanya berfungsi sebagai informasi pendek tentang sesuatu, yang pada contoh kali ini adalah gambar. Dengan menggunakan cara hover, caption tersebut akan di sembunyikan terlebih dahulu, baru akan ditampilkan saat gambarnya disorot oleh mouse. Seperti itu kira-kira cara mengakalinya. Selain membuat isi konten tidak penuh, juga menjadi daya tarik tersendiri karena ada interaksi antar pengguna.

Oke langsung saja, untuk membuat contoh seperti itu kalian bisa ikuti langkah-langkah seperti berikut. Sebelumnya disini tentu kalian harus sudah bisa tentang bootstrap ya, karena dasar struktur web pada contoh kali ini menggunakan bootstrap. Dan juga sedikit fungsi dasar dari javascript untuk interaksinya.

caption.html

Setelah sudah kalian save dan untuk melihat hasilnya kalian bisa buka pada browser kalian. Jika berhasil maka hasilnya akan seperti pada demo ini.

Mudah bukan ?

Sekian pembahasan mengenai cara membuat hover caption pada image di Bootstrap. Semoga bermanfaat.

WhatsApp chat