ImagesLesson 70Preview gratis
Image Overlay Icon
Lesson ini bagian dari How To · Semua level
Ringkasan
Image overlay icon menampilkan ikon seperti kaca pembesar atau tautan di tengah gambar saat hover. Ikon diposisikan absolut dan dipusatkan dengan kombinasi top, left, serta transform. Efek ini memberi petunjuk visual bahwa gambar dapat diperbesar atau dibuka.
Poin kunci
- Ikon diposisikan absolute di dalam kontainer relative.
- top: 50%; left: 50% dengan translate(-50%, -50%) memusatkan ikon.
- opacity 0 menyembunyikan ikon, lalu menjadi 1 saat hover.
- transform scale dapat menambahkan animasi pembesaran ikon.
- Ikon dekoratif diberi aria-hidden, sedangkan tautan tetap memerlukan label.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.