Nasıl oluşturulur: Resim kaplayıcı ikonu

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.

Kişisel olarak deneyin

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;
}

Kişisel olarak deneyin

İlgili sayfalar

Rehber:CSS Image

Rehber:Resim eklenti fırlama etkisi nasıl oluşturulur