Pada tutorial sebelumnya, kita sudah belajar Cara Membuat Menu Navigasi Website Dengan CSS. Pada tutorial kali ini, kita akan belajar cara membuat efek overlay pada gambar untuk mempercantik tampilan web dengan menggunakan CSS.
Overlay artinya menutupi permukaan sesuatu dengan lapisan. Dengan kata lain, ini digunakan menimpa tampilan di atas tampilan lainnya. Overlay membuat halaman web menarik dan mudah dirancang.
Membuat efek overlay berarti menyatukan 2 div di tempat yang sama, namun keduanya akan muncul bila diperlukan.
Untuk memunculkan div kedua, kita bisa mengarahkan atau mengklik salah satu div. Dalam 2 div ini, satu div adalah div overlay yang berisi apa yang akan muncul saat pengguna mengarahkan kursor ke gambar, dan div kedua adalah wadah yang akan menampung gambar dan overlaynya.
Efek Overlay Fade
Pada efek overlay ini, ketika kita menggerakkan kursor pada gambar, maka overlay tersebut akan muncul di bagian atas gambar. Mari kita lihat cara kerjanya.
<!DOCTYPE HTML>
<html>
<head>
<title>Image Overlay</title>
<style>
.container img {
width: 300px;
height: 300px;
}
.container {
position: relative;
width: 25%;
height: auto;
}
.overlay{
position: absolute;
transition: 0.5s ease;
height: 300px;
width: 300px;
top: 0;
left: 20px;
background-color: lightblue;
opacity: 0;
}
.container:hover .overlay {
opacity: 0.9;
}
</style>
</head>
<body>
<center>
<h1>Fade dalam Overlay</h1>
<h2> Gerakkan kursor ke atas gambar untuk melihat efeknya.</h2>
<div class="container">
<img src= " https://mbahwp.com/wp-content/uploads/2023/09/pinguin.jpeg ">
<div class="overlay"></div>
</div>
</center>
</body>
</html> Efek Overlay Slide Pada Gambar
Kita dapat membuat efek overlay slide dengan 4 tipe berbeda yaitu atas, bawah, kiri, dan kanan. Kita akan membahasnya satu per satu dengan menggunakan contoh masing-masing.
Slide Overlay dari atas ke bawah
Pertama, kita melihat cara membuat slide dalam overlay dari atas menggunakan contoh.
<!DOCTYPE HTML>
<html>
<head>
<style>
.container img {
width: 300px;
height: 300px;
}
.container {
position: relative;
width: 25%;
height: auto;
}
.container:hover .overlay {
opacity: 1;
height: 300px;
}
.overlay{
position: absolute;
transition: 0.7s ease;
opacity: 0;
width: 300px;
height: 0;
top: 0;
right: 20px;
background-color: lightblue;;
}
</style>
</head>
<body>
<center>
<h1> Slide Overlay dari atas ke bawah </h1>
<h2> Gerakkan kursor ke atas gambar untuk melihat efeknya.</h2>
<div class="container">
<img src= "https://mbahwp.com/wp-content/uploads/2023/09/pinguin.jpeg">
<div class="overlay"></div>
</div>
</center>
</body>
</html> Slide Overlay dari bawah ke atas
Pada efek overlay ini, ketika kita menggerakkan kursor ke atas gambar, maka akan terjadi pergeseran dari bawah ke atas. Akan terlihat jelas pada contoh berikut.
<!DOCTYPE HTML>
<html>
<head>
<style>
.container img {
width: 300px;
height: 300px;
}
.container {
position: relative;
width: 25%;
height: auto;
}
.container:hover .overlay {
opacity: 1;
height: 300px;
}
.overlay{
position: absolute;
transition: 0.7s ease;
opacity: 0;
width: 300px;
height: 0px;
bottom: 0;
right: 20px;
background-color: lightblue;;
}
</style>
</head>
<body>
<center>
<h1>Slide di Overlay dari bawah ke atas </h1>
<h2> Gerakkan kursor ke atas gambar untuk melihat efeknya.</h2>
<div class="container">
<img src= " https://mbahwp.com/wp-content/uploads/2023/09/pinguin.jpeg ">
<div class="overlay"></div>
</div>
</center>
</body>
</html>Slide Overlay dari kiri ke kanan
Sesuai dengan namanya, slide akan meluncur dari kiri ke kanan. Lihat contoh berikut untuk memahaminya secara detail.
<!DOCTYPE HTML>
<html>
<head>
<style>
.container img {
width: 300px;
height: 300px;
}
.container {
position: relative;
width: 25%;
height: auto;
}
.container:hover .overlay {
opacity: 1;
width: 300px;
}
.overlay{
position: absolute;
transition: 0.7s ease;
opacity: 0;
width: 0;
height: 100%;
bottom: 0;
left: 20px;
background-color: lightblue;;
}
</style>
</head>
<body>
<center>
<h1>Slide di Overlay dari kiri ke kanan </h1>
<h2> Gerakkan kursor ke atas gambar untuk melihat efeknya.</h2>
<div class="container">
<img src= " https://mbahwp.com/wp-content/uploads/2023/09/pinguin.jpeg">
<div class="overlay"></div>
</div>
</center>
</body>
</html> Slide Overlay dari kanan ke kiri
Mirip dengan efek slide di atas, hanya saja geserannya dari kanan ke kiri.
<!DOCTYPE HTML>
<html>
<head>
<style>
.container img {
width: 300px;
height: 300px;
}
.container {
position: relative;
width: 25%;
height: auto;
}
.container:hover .overlay {
opacity: 1;
width: 300px;
}
.overlay{
position: absolute;
transition: 0.7s ease;
opacity: 0;
width: 0;
height: 100%;
bottom: 0;
right: 20px;
background-color: lightblue;;
}
</style>
</head>
<body>
<center>
<h1>Slide di Overlay dari kanan ke kiri </h1>
<h2> Gerakkan kursor ke atas gambar untuk melihat efeknya.</h2>
<div class="container">
<img src= "https://mbahwp.com/wp-content/uploads/2023/09/pinguin.jpeg">
<div class="overlay"></div>
</div>
</center>
</body>
</html>Judul Overlay Gambar
Pada efek overlay gambar, ketika kita mengarahkan kursor ke suatu gambar, kita akan melihat judul pada gambar tersebut. Lihat contoh di bawah untuk hal yang sama.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
text-align: center;
}
* {box-sizing: border-box;}
.container {
position: relative;
width: 50%;
max-width: 300px;
}
img {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.2);
width: 100%;
opacity:0;
transition: .9s ease;
font-size: 25px;
padding: 20px;
}
.container:hover .overlay {
opacity: 1.5;
}
</style>
</head>
<body>
<h1> Efek Judul Overlay Gambar </h1>
<h2> Gerakkan mouse Anda ke atas gambar untuk melihat efeknya.</h2>
<center>
<div class="container">
<img src="https://mbahwp.com/wp-content/uploads/2023/09/pinguin.jpeg">
<div class="overlay">Selamat datang di Mbah WP</div>
</div>
</center>
</body>
</html>Ikon Overlay Gambar
Pada efek overlay ini, saat mouse diarahkan, akan ada ikon yang menutupi seluruh gambar. Kita dapat mengatur tautan pada ikon itu agar bisa berpindah antar halaman. Hal ini dapat terlihat jelas dari contoh berikut.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.container {
position: relative;
width: 100%;
max-width: 400px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 1s ease;
background-color: lightblue;
}
.container:hover .overlay {
opacity: 1;
}
.icon {
color: blue;
font-size: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<center>
<h1> Efek ikon Overlay Gambar </h1>
<h2> Gerakkan mouse Anda ke atas gambar untuk melihat efeknya.</h2>
<div class="container">
<img src="https://mbahwp.com/wp-content/uploads/2023/09/pinguin.jpeg" class="image">
<div class="overlay">
<a href="#" class="icon">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
</center>
</body>
</html> Demikian cara membuat efek overlay pada gambar dengan bantuan CSS, semoga tutorial ini bisa membantu Anda untuk berlatih menggunakan CSS untuk membuat tampilan website yang lebih bagus.
0 Komentar