Cara Membuat Card On Hover
Di segmen kali ini saya akan membuat card on hover. Effek hover adalah efek dimana jika cursor mendekati suatu objek yang dimana objek tersebut ada hover nya, makan objek tersebut akan berubah.
Di kesempatan kali ini saya akan mencoba membuat card on hover sederhana. bagaiman cara membuatnya? ikuti saya
Langkah Pengerjaan
1. Siapkan device anda.
2. Buka teks editor anda.
3. Buat file index.html.
4. Buat struktur html.
5. Pada tag <body> kita buat tag <div> dan beri clas container, dan di dalam tag <div> buat lagi tag <div> baru dengan diberi clas card. Seperti gambar di bawah
6. Buatlah file main.css, lalu sambungkan dengan html yang sudah dibuat
7. Ketikan sintak dibawah untuk mengubah padding, margin dan mengubah warna background
8. Pada tahap ini kita akan memberikan style pada tag <div> clas container ketikan sintak dibawah ini
9. Kemudian berikan style pada tag <div> clas card, ketikan sintak dibawah ini
10. Selanjutnya berikan Hover pada clas card di atas dengan cara mengetika sintak dibawah ini
11. Jalankan file html yang sudah dibuat dan hasil dari file html tersebut akan seperti Vidio dibawah
Ya, begitulah cara membuat Card on Hover sederhana menggunkan html dan CSS. Sekian dari saya semoga bermanfaat 😁. ~Zenprojec
Komentar
Posting Komentar