Halo teman-teman pada kesempatan kali ini saya akan membahas Cara Membuat Efek Info Menggunakan Hover Dengan CSS. Seperti apa sih efek info menggunakan hover?

Efek Info Hover adalah dimana misalnya kita mempunyai gambar lalu pada saat kita menghover atau mengarahkan kursor terhadap gambar tersebut, maka akan ada informasi dari gambar tersebut. Bagamana cara membuatnya? Kita langsung saja ya mempraktekkannya

Contoh

  • Saya akan membuat sebuah efek info hover pada sebuah gambar, dan saya akan membuat infonya

  • Lalu kita akan mengatur desain dari gambar dan infonya tersebut menggunakan CSS

  • Dan untuk Mempercantik infonya bisa kita tambahkan di CSS seperti dibawah ini, namun teman-teman dapat mendesainnya sesuka kalian

Nah untuk sementara hasilnya akan seperti ini

ss

  • Agar gambar dan info menjadi atas bawah atau info menimpa gambar, teman-teman tambahkan position pada CSSnya

  • Nah teman-teman kenapa .gambar itu positionnya relative karna .gambar itu adalah parentnya yang akan di timpah dengan .info. sehingga position untuk .info itu absolute, dan jangan lupa juga untuk atur posisi left dan top menjadi nol agar info dan gambar benar-benar pas sejajar
  • Lalu kita akan menambahkan transform dan mengatur transitionnya, menjadi seperti dibawah ini

  • Kita beri overflow hidden pada .gambar agar pada saat kita tidak menghover gambar, kotak info tidak terlihat

Nah Hasilnya seperti ini ya teman-teman

ss-2

Jadi pada saat kita menghover atau mengarahkan kursor kita ke gambar, maka kotak info akan muncul. Mudah ya teman-teman. Semoga bermanfaat