Penggunaan hover pada CSS dan HTML

Halo Sobat Algos! Selamat datang lagi dalam AlgoInfo!
AlgoInfo merupakan proker yang berisi tentang informasi informasi yang berhubungan dengan dunia coding. Untuk materi kali ini, kami akan menjelaskan tentang beberapa fungsi dari CSS dan HTML. Di materi AlgoInfo sebelumnya, telah dijelaskan apa itu HTML, CSS, dan JavaScript. CSS merupakan aturan untuk mengendalikan komponen yang telah diatur di HTML. Simplenya CSS digunakan untuk mengatur HTML supaya lebih menarik. Banyak jenis fungsi dari CSS yang dapat digunakan, di materi ini kami akan menjelaskan fungsi seperti hover, dan beberapa cara untuk mengatur box. Nah sekian buat pendahuluanya, kembali ke Laptop!

Di atas ini merupakan contoh dari bentuk HTML dan CSS yang udah kami buat. Untuk temanya kami pilih spongebob karena spongebob warna kuning, saya suka warna kuning. Ngga deng bercanda hehe. Untuk background haru melakukan penyesuaian. Karena gambar konten berisi spongebob, maka kita buat background Bikini Bottom. Jadi, kita buat struktur HTML nya terlebih dahulu. Yang perlu dibuat pertama yaitu header yang tertulis nama Algomarine. Lalu selanjutnya, kita buat isi konten. Dalam isi konten terdapat 2 jenis konten, yaitu gambar seperti gambar diatas dan teks seperti ini

Untuk struktur yang dibuat di HTML dapat berupa

Setelah struktur HTML telah dibuat, maka dapat diatur menggunakan CSS. Pada konten, kami membuat kotak lalu beri background-color yang sesuai. Untuk memberi jarak dari tiap kotak dapat menggunakan perintah margin. Bila cursor diarahkan ke arah gambar, gambar pada konten dapat membesar. Cara untuk mengubah gambar saat ditunjuk cursor dengan menggunakan hover. Selain digunakan untuk memperbesar gambar, hover dapat digunakan juga untuk memunculkan konten teks yang menumpuk dengan gambar. Jika tidak diberi perintah hover, maka pada gambar konten akan tertutup oleh konten tulisan. Untuk penjelasan lebih lengkapnya dapat dilihat pada youtube kami!