Nasıl Yapılır - Görüntü Bindirme Başlığı
Fareyle üzerine gelindiğinde bir görüntü bindirme başlığının nasıl oluşturulacağını öğrenin.
Görüntü Bindirme Başlığı
Bindirme efektini görmek için resmin üzerine gelin.
Bindirme Görüntü Başlığı Nasıl Oluşturulur
Adım 1) HTML'yi ekleyin:
Örnek
<div class="container">
<img src="img_avatar.png" alt="Avatar"
class="image">
<div class="overlay">My Name is John</div>
</div>
Adım 2) CSS'yi ekleyin:
Örnek
* {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;
}
İpucu: Nasıl Yapılır - Görüntü Vurgulu Yerleşimi bölümündeki diğer görüntü bindirme efektlerine (solma, kaydırma, vb.) bakın .
Go to our CSS Images Tutorial to learn more about how to style images.