W3.CSSLesson 39Preview gratis
W3.CSS Images
Lesson ini bagian dari W3.CSS · Semua level
Ringkasan
W3.CSS menyediakan kelas utilitas sederhana agar gambar tampil rapi dan responsif di berbagai ukuran layar. Kelas utamanya, .w3-image, membuat gambar memenuhi lebar kontainer sehingga tingginya mengikuti rasio aspek gambar. Ditambah efek hover dan kelas posisi display, kamu bisa membuat galeri rapi tanpa menulis CSS kustom.
Poin kunci
- Kelas .w3-image membuat <img> selebar kontainer induk dengan tinggi mengikuti rasio aspek
- Kelas .w3-hover-opacity menurunkan transparansi gambar saat kursor menyentuhnya
- Kelas .w3-display-* memungkinkan menempatkan teks atau tombol di atas gambar
- Selalu tulis atribut alt untuk aksesibilitas dan SEO
- Bungkus dengan .w3-container agar gambar punya jarak aman dari tepi layar
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.