CSS - Penampalan: Panduan Pemula untuk Menciptakan Efect Web Dinamik

Hai sana, bintang desain web masa depan! Hari ini, kita akan melihat dunia yang menarik dari penampalan CSS. Jangan khawatir jika Anda baru dalam hal ini - saya ingat saat pertama kali belajar tentang penampalan, dan saya berjanji Anda akan menemukannya siau menyenangkan dan menghasilkan. Jadi, mari kita mulai perjalanan ini bersama!

Apa Itu Penampalan CSS?

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

Penampalan CSS - Contoh Dasar

Mari kita mulai dengan contoh penampalan 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 wadah dengan gambar dan div penampalan.
2. Penampalan ditempatkan secara mutlak dalam wadah.
3. Awalnya, penampalan memiliki 0 opacity (tidak terlihat).
4. Ketika kita mengarahkan mouse ke wadah, opacity penampalan berubah menjadi 1 (terlihat sepenuhnya).
5. Teks ditempatkan di tengah penampalan.

Penampalan CSS - Geser Dari Atas ke Bawah

Sekarang, mari kita membuatnya lebih menarik dengan efek geser! Ini adalah bagaimana kita bisa mengubah CSS untuk membuat penampalan 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, penampalan mulai di atas gambar (bottom: 100%) tanpa tinggi. Ketika diarahkan mouse, ia geser turun untuk menutupi seluruh gambar.

Penampalan CSS - Geser Dari Bawah ke Atas

Apa bila kita ingin penampalan geser ke atas? Mudah-mudahan! Hanya ubah 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 penampalan mulai di bawah dan memperluas ke atas saat diarahkan mouse.

Penampalan CSS - Geser Dari Kiri ke Kanan

Mari kita ubah dan membuat penampalan 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, penampalan mulai tanpa lebar di sebelah kiri dan memperluas ke lebuh kanan saat diarahkan mouse.

Penampalan CSS - Geser 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, penampalan mulai di sebelah kanan dan geser ke kiri saat diarahkan mouse.

Penampalan CSS - 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 mengarahkan mouse ke gambar.

Penampalan CSS - Penampalan Judul Gambar

Mari kita buat penampalan yang menampilkan judul gambar saat diarahkan mouse:

<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 penampalan judul yang muncul dari bawah gambar saat diarahkan mouse.

Penampalan CSS - Penampalan Ikon

Sekarang, mari kita tambahkan penampalan 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 penampalan ikon yang muncul di tengah gambar saat diarahkan mouse.

Properti Penampalan CSS Terkait

Ini adalah tabel properti yang umum digunakan dengan penampalan CSS:

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

Dan itu saja, teman-teman! Anda telah belajar dasar penampalan CSS. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba contoh ini. Siapa tahu? Anda mungkin menciptakan tren besar berikutnya dalam desain web! Semangat coding, dan semoga penampalan Anda selalu halus dan transisi Anda selalu mulus!

Credits: Image by storyset