Jak na to - Ikona překryvného obrázku
Naučte se, jak vytvořit efekt ikony překryvného obrázku při umístění kurzoru myši.
Ikona překrytí obrázku
Umístěním ukazatele myši na obrázek zobrazíte efekt překrytí.
Jak vytvořit ikonu překryvného obrázku
Krok 1) Přidejte HTML:
Příklad
<!-- 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>
Krok 2) Přidejte CSS:
Příklad
/* 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;
}
Tip: Podívejte se také na další efekty překryvného obrázku (vyblednutí, posunutí atd.) v našem Návodu – Překryvný obrázek s přechodem .
Přejděte do našeho výukového programu pro obrázky CSS , kde se dozvíte více o tom, jak upravovat obrázky.