Nasıl Yapılır - Görüntü Bindirme Simgesi
Fareyle üzerine gelindiğinde görüntü bindirme simgesi efektinin nasıl oluşturulacağını öğrenin.
Görüntü Bindirme Simgesi
Bindirme efektini görmek için resmin üzerine gelin.
Bindirme Görüntü Simgesi Nasıl Oluşturulur
Adım 1) HTML'yi ekleyin:
Örnek
<!-- Add icon library -->
<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="User Profile">
<i
class="fa fa-user"></i>
</a>
</div>
</div>
Adım 2) CSS'yi ekleyin:
Örnek
/* Container
needed to position the overlay. Adjust the width as needed */
.container {
position: relative;
width:
100%;
max-width: 400px;
}
/* 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;
top:
0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .3s ease;
background-color: red;
}
/* When you mouse over the container, fade
in the overlay icon*/
.container:hover .overlay {
opacity: 1;
}
/*
The icon inside the overlay is positioned in
the middle vertically and horizontally */
.icon {
color: white;
font-size: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform:
translate(-50%, -50%);
text-align: center;
}
/* When you
move the mouse over the icon, change color */
.fa-user:hover {
color: #eee;
}
İ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 .