How TO - Judul Hamparan Gambar
Pelajari cara membuat judul overlay gambar saat mengarahkan kursor.
Judul Hamparan Gambar
Arahkan kursor ke gambar untuk melihat efek overlay.
Cara Membuat Judul Gambar Overlay
Langkah 1) Tambahkan HTML:
Contoh
<div class="container">
<img src="img_avatar.png" alt="Avatar"
class="image">
<div class="overlay">My Name is John</div>
</div>
Langkah 2) Tambahkan CSS:
Contoh
* {box-sizing: border-box}
/* Container
needed to position the overlay. Adjust the width as needed */
.container {
position: relative;
width:
50%;
max-width: 300px;
}
/* Make the image to responsive */
.image {
display: block;
width: 100%;
height: auto;
}
/*
The overlay effect - lays on top of the container and
over the image */
.overlay {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0,
0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
/* When you mouse over the container, fade
in the overlay title */
.container:hover .overlay {
opacity: 1;
}
Tip: Lihat juga efek overlay gambar lainnya (fade, slide, dll) di How To - Image Hover Overlay kami .
Go to our CSS Images Tutorial to learn more about how to style images.