Nasıl Yapılır - Görüntü Bindirme Yakınlaştırma
Fareyle üzerine gelindiğinde görüntü bindirme yakınlaştırma efektinin nasıl oluşturulacağını öğrenin.
Görüntü Vurgulu Tam Ekran Yakınlaştırma
Yakınlaştırma efektini görmek için resmin üzerine gelin.
Bindirme Yakınlaştırma Efekti 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">
<div
class="text">Hello World</div>
</div>
</div>
Adım 2) CSS'yi ekleyin:
Örnek
/* Container
needed to position the overlay. Adjust the width as needed */
.container {
position: relative;
width: 50%;
}
/* Make the image to responsive */
.image {
width: 100%;
height: auto;
}
/*
The overlay effect (full height and width) - lays on top of the container and
over the image */
.overlay {
position: absolute;
bottom: 0;
left: 0;
right:
0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 100%;
transform: scale(0);
transition: .3s ease;
}
/* When you mouse over the container, the
overlay text will "zoom" in display */
.container:hover .overlay {
transform:
scale(1);
}
/* Some text inside the overlay, which is positioned in
the middle vertically and horizontally */
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
İ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 .
Resimlere nasıl stil uygulanacağı hakkında daha fazla bilgi edinmek için CSS Görselleri Eğitimimize gidin .