Seperti yang kita ketahui, bahwa perkembangan Web Desain sedang melesat saat ini. Diantara berbagai banyak bentuk, warna, fitur, atau animasi bisa dihasilkan hanya dengan kumpulan kode-kode HTML dan CSS dimulai dari yang sangat sederhana maupun sampai ke tingkat yang "sangat sulit".
Dalam artikel kali ini saya akan berbagi sekaligus bertukar ilmu dengan kawan-kawan sekalian tentang: Cara Membuat Simple-Easy-Cool Hover Effect pada CSS. Tanpa basa-basi lagi, berikut adalah contoh Hover Effect yang saya anggap lumayan bagus dan simpel dalam elemen-elemennya:
Bagaimana? Sudah tersiratkah logika dari CSS di atas? Atau sudah tersiratkah elemen-elemen dari CSS di atas? Memang terlihat simpel, dan elemen-elemen dalam CSS-nya pun sangat sederhana. Kita hanya "bermain" pada box-shadow saja. Jadi, ketika kita meletakkan kursor di atas circle-circle itu, yang melebar hanya box-shadow-nya saja, bukan width atau height-nya. Untuk HTML-nya, untuk Hover Effect di atas hanya menggunakan 4 div, tentu saja div didalam div. Penasaran bagaimana “mentahan” dari CSS tersebut? Langsung saja klik pada tautan ini: source code.
Lamanya transition pada CSS di atas berbeda-beda agar visual yang dihasilkan lebih menarik, transition untuk hover pada circle yang paling dalam sangat cepat dan yang di luar sedikit lebih lambat. Hover Effect pada CSS di atas mungkin bisa menginspirasi teman-teman sekalian untuk membuat button atau hanya sekedar animasi penghias pada Web-nya masing-masing.
Sekian artikel yang saya tulis, semoga bisa membantu. Jika ada pertanyaan atau masukkan, silahkan tulis di kolom komentar. Terimakasih, salam lieur! :D
Sumber: Bikin sendiri :p
