hello sobat informatics jumpa lagi dengan kami, dalam jumpa kita kali ini kami akan membahas tentang cara membuat animasi image overlay sederhana dengan bantuan css, untuk mengetahui proses cara pembuatnya langsung simak saja yuk tutorial kita kali ini.
1. Hal yang pertama kali harus anda lakukan untuk membuat animasi ini adalah siapkan gambar, klik kanan gambar dibawah ini dan kemudian simpan dengan nama yi.png.
2. Setelah gambar disiapkan kita beralih ke script htmlnya ketik kode sebagai berikut dan simpan dengan nama Overlay.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2 style="color:blue">Membuat Image Overlay dengan CSS</h2>
<h3 style="color:blue"> Powered by Young Informatics</h3>
<div class="container">
<img src="yi.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello Sobat Informatics</div>
</div>
</div>
</body>
</html>
3. Lalu kita buat kode cssnya simpan dengan nama style.css
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
opacity:0.5;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
4. Buka file overlay.html klik kanan dan open with browser
0 komentar:
Posting Komentar