CSS - Overlay: Panduan Untuk Pemula dalam Membuat Efect Web Dinamis

Hai teman-teman, para superstar desain web masa depan! Hari ini, kita akan melihat dunia yang menarik dari CSS overlays. Jangan khawatir jika Anda baru dalam hal ini - saya ingat saat pertama kali belajar tentang overlays, dan saya berjanji Anda akan menemukan ini siau menyenangkan dan menggiurkan. mari kita mulai perjalanan ini bersama!

Apa Itu CSS Overlay?

Sebelum kita masuk ke kode, mari kita pahami apa itu overlay. Bayangkan Anda melihat lukisan yang indah, dan tiba-tiba, seseorang menempatkan lembaran transparan di atasnya dengan beberapa teks. Itu sebenarnya apa yang dilakukan overlay di situs web - menambahkan lapisan ekstra di atas konten yang sudah ada, biasanya untuk memberikan informasi tambahan atau membuat efek visual.

CSS Overlay - Contoh Dasar

Mari kita mulai dengan contoh overlay sederhana. Ini adalah kode HTML dan CSS:

<div class="container">
<img src="cute-puppy.jpg" alt="Anak anjing yang lucu">
<div class="overlay">
<div class="text">Halo, saya anak anjing!</div>
</div>
</div>

.container {
position: relative;
width: 100%;
}

.image {
display: block;
width: 100%;
height: auto;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.5);
}

.container:hover .overlay {
opacity: 1;
}

.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

mari kitauraikan ini:

1. Kita memiliki sebuah kontainer dengan gambar dan div overlay.
2. Overlay ditempatkan secara mutlak dalam kontainer.
3. Awalnya, overlay memiliki opacity 0 (tidak terlihat).
4. Ketika kita hover di kontainer, opacity overlay berubah menjadi 1 (terlihat sepenuhnya).
5. Teks ditempatkan di tengah overlay.

CSS Overlay - Efect Sliding Dari Atas ke Bawah

Sekarang, mari kita membuat hal ini lebih menarik dengan efek sliding! Ini adalah bagaimana kita bisa mengubah CSS untuk membuat overlay geser dari atas ke bawah:

.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}

.container:hover .overlay {
bottom: 0;
height: 100%;
}

Dalam contoh ini, overlay mulai di atas gambar (bottom: 100%) dengan tinggi 0. Ketika dihover, ia geser ke bawah untuk menutup seluruh gambar.

CSS Overlay - Efect Sliding Dari Bawah ke Atas

Apa bila kita ingin overlay geser ke atas? Mudah-mudahan! cukup mengubah beberapa baris:

.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}

.container:hover .overlay {
height: 100%;
}

Sekarang overlay mulai di bawah dan membesar ke atas saat dihover.

CSS Overlay - Efect Sliding Dari Kiri ke Kanan

Mari kita ubah hal ini dan membuat overlay geser dari kiri ke kanan:

.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 100%;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}

.container:hover .overlay {
width: 100%;
right: 0;
}

Di sini, overlay mulai dengan lebar 0 di sebelah kiri dan membesar ke lebar penuh saat dihover.

CSS Overlay - Efect Sliding Dari Kanan ke Kiri

Dan tentu saja, kita bisa membuatnya geser dari kanan ke kiri juga:

.overlay {
position: absolute;
bottom: 0;
left: 100%;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}

.container:hover .overlay {
width: 100%;
left: 0;
}

Kali ini, overlay mulai di sebelah kanan dan geser ke kiri saat dihover.

CSS Overlay - Efect Pudar

Ingat contoh pertama kita? Itu sebenarnya efek pudar! Tetapi mari kita membuatnya lebih halus:

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.5);
}

.container:hover .overlay {
opacity: 1;
}

Ini menciptakan efek pudar halus saat hover di gambar.

CSS Overlay - Efect Judul Gambar

Mari kita buat overlay yang menampilkan judul gambar saat hover:

<div class="container">
<img src="cute-puppy.jpg" alt="Anak anjing yang lucu" class="image">
<div class="overlay">
<div class="title">Anak Anjing yang Lucu</div>
</div>
</div>

.container {
position: relative;
width: 100%;
}

.image {
display: block;
width: 100%;
height: auto;
}

.overlay {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity: 0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}

.container:hover .overlay {
opacity: 1;
}

Ini menciptakan overlay judul yang muncul dari bawah gambar saat hover.

CSS Overlay - Efect Ikon Gambar

Sekarang, mari kita tambahkan overlay ikon ke gambar:

<div class="container">
<img src="cute-puppy.jpg" alt="Anak anjing yang lucu" class="image">
<div class="overlay">
<a href="#" class="icon" title="Profil Pengguna">
<i class="fa fa-user"></i>
</a>
</div>
</div>

.container {
position: relative;
width: 50%;
}

.image {
display: block;
width: 100%;
height: auto;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.5);
}

.container:hover .overlay {
opacity: 1;
}

.icon {
color: white;
font-size: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}

.fa-user:hover {
color: #eee;
}

Ini menciptakan overlay ikon yang muncul di tengah gambar saat hover.

CSS Overlay - Properti Terkait

Ini adalah tabel properti yang umum digunakan dengan CSS overlays:

Properti	Deskripsi
position	Mengatur metode penempatan
top, bottom, left, right	Menentukan posisi overlay
width, height	Mengatur dimensi overlay
opacity	Mengendalikan transparansi overlay
transition	Menentukan bagaimana overlay muncul/hilang
background-color	Mengatur warna overlay
z-index	Mengatur urutan stacking elemen

Dan itu saja, teman-teman! Anda baru saja belajar dasar CSS overlays. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba contoh ini. Siapa tahu? Anda mungkin menciptakan tren web berikutnya! Selamat coding, dan semoga overlay Anda selalu halus dan transisi Anda selalu mulus!

Credits: Image by storyset