Yansıtma nasıl oluşturulur: Görsel yansıtma
- Önceki sayfa Resim üstüne kaydırma
- Sonraki sayfa Resim üstüne başlık
Fare üzerinde yansıtma etkisi oluşturma nasıl
Görsel yansıtma tam ekran ölçeklendirme
Görsel üzerinde fareyi tutun ve yansıtma etkisini görmek için tıklayın.
Yansıtma örneği oluşturma nasıl
İlk adım - HTML ekleyin:
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
İkinci adım - CSS ekleyin:
/* Kapsama katmanını yerleştirmek için gereken konteyner. Gerekirse genişliği ayarlayın */
.container {
position: relative;
width: 50%;
}
/* Görseli yanıtlayıcı hale getir */
.image {
width: 100%;
height: auto;
}
/* Kapsama etkisi (tam yükseklik ve tam genişlik) - konteynerin üstünde ve görsel üzerinde konumlandırılır */
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 100%;
transform: scale(0);
transition: .3s ease;
}
/* Konteyner üzerinde fareyi tuttuğunuzda, ek metin “ölçeklendirme” ile gösterilir */
.container:hover .overlay {
transform: scale(1);
}
/* Kapsama katmanı içindeki bazı metinler, dikey ve yatay yönde ortalanmış konumlandırma */
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
ilgili sayfalar
ders:CSS resmi
- Önceki sayfa Resim üstüne kaydırma
- Sonraki sayfa Resim üstüne başlık
