HTML/CSS

Membuat Overlay Text di Atas Gambar (Responsive)

Teknik CSS Modern untuk menaruh teks di tengah gambar dengan background gelap transparan (overlay). Sangat sering digunakan untuk banner atau hero section website.

<div class="relative w-full h-64 rounded-2xl overflow-hidden group">
  <img src="https://source.unsplash.com/random" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
  <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
    <h2 class="text-white font-bold text-xl">Judul Artikel ✨</h2>
  </div>
</div>

5 Views