Nasıl oluşturulur: Resim kaplayıcı ikonu
- Previous page Image overlay title
- Next page Image Effects
Fare üzerindeyken resim kaplayıcı etki oluşturma nasıl yapılır.
Resim kaplayıcı ikonu
Fareyi resmin üzerinde tutun, eklenmiş etkiyi görmek için.

Kaplayıcı resim ikonu nasıl oluşturulur
Adım 1 - HTML ekleme:
<!-- Ekran simgeleri ekle --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container"> <img src="img_avatar.png" alt="Avatar" class="image"> <div class="overlay"> <a href="#" class="icon" title="Kullanıcı Profili"> <i class="fa fa-user"></i> </a> </div> </div>
İkinci Adım - CSS Ekleme:
/* Kapak koyulması gereken konteyner. Gerekirse genişliği ayarlayın */ .container { position: relative; width: 100%; max-width: 400px; } /* Resmi yanıtlayabilir hale getir */ .image { width: 100%; height: auto; } /* Katmanlı etkisi (tam yükseklik ve genişlik) - Konteyner ve resmin üzerinde konumlandırılır */ .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .3s ease; background-color: red; } /* Konteyner üzerine fare işaretçisini sürüklediğinizde, eklenti yavaşça soluklaşır */ .container:hover .overlay { opacity: 1; } /* Kapak içindeki simge, dikey ve yatay yönde merkezde konumlandırılır */ .icon { color: white; font-size: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; } /* Fare işaretçisi simge üzerine gelindiğinde renk değiştir */ .fa-user:hover { color: #eee; }
İlgili sayfalar
Rehber:CSS Image
- Previous page Image overlay title
- Next page Image Effects