Seperti yang kita tahu bahwa fungsi CSS itu sangat banyak sekali, bahkan dengan berbekal HTML dan CSS kita dapat membuat sebuah game sederhana. Namun untuk sebuah game kita tidak akan bahas di sini, di sini kita hanya akan fokus pada pembahasan efek hover. Pada kesempatan kali ini saya akan membahas tentang Cara Membuat Efek Hover Info dengan CSS.
Efek hover info adalah efek yang terjadi terhadap sebuah elemen HTML yang diberi hover, ketika kursor berada di atas sebuah elemen HTML yang diberi efek hover maka akan memunculkan sebuah info. Oke untuk lebih jelasnya silahkan langkah – langkah saya di bawah ini.
Oke buat sebuah dokumen HTML seperti di bawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transition</title> <link rel="stylesheet" href="aa.css"> </head> <body> <div class="box"> <div class="utama"> <h2>aku adalah isi box</h2> </div> <div class="atas"></div> <div class="bawah"> <h2>aku adlah judul bawah</h2> <p>aku adalh paragraf bawah</p> </div> </div> </body> </html> |
Di dalam dokumen HTML di atas saya membuat sebuah kelas box, di dalam kelas box terdapat tiga elemen class HTML yaitu class utama, class atas, class bawah. Class utama adalah class yang akan stay di dalam class box sedangkan class atas dan bawah nantinya akan kita keluarkan dari class box, class atas dan bawah hanya muncul ketika ada efek hover terhadap class box.
Oke untuk lebih jelasnya silahkan buat file CSS di bawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
*{padding: 0; margin: 0;} .box{ position: relative; width: 350px; height: 250px; background: gray; margin: 50px auto 0; overflow: hidden; } .utama h2{ position: relative; top: 30px; text-align:center; } .box:hover .utama{ display:none; transition:all 0.8s ease; } .box:hover .bawah{ top:110px; } .box:hover .atas{ bottom:110px; } .atas { background: rgba(80, 189, 121, 0.5); width: 350px; height: 250px; position:absolute; bottom: 251px; transition: all 0.5s ease-out; } .atas h2 { position: relative; top:250px; } .bawah { width: 350px; height: 250px; position:absolute; top: 251px; background:red; transition: all 0.5s ease-out; } .bawah h2,p { position: relative; top: 20px; text-align:center; } |
Oke kalau sudah silahkan save dan jalankan pada browsernya untuk melihat hasilnya. Oke cukup sekian pembahasan saya tentang Cara Membuat Efek Hover Info dengan CSS, semoga bermanfaat.