Come fare per - Icona di sovrapposizione di immagini
Scopri come creare un effetto icona di sovrapposizione dell'immagine al passaggio del mouse.
Icona Sovrapposizione immagine
Passa il mouse sopra l'immagine per vedere l'effetto di sovrapposizione.
Come creare un'icona immagine sovrapposta
Passaggio 1) Aggiungi HTML:
Esempio
<!-- 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>
Passaggio 2) Aggiungi CSS:
Esempio
/* 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;
}
Suggerimento: vedi anche altri effetti di sovrapposizione dell'immagine (dissolvenza, diapositiva, ecc.) nel nostro Come fare per - Sovrapposizione immagine al passaggio del mouse .
Vai al nostro tutorial sulle immagini CSS per saperne di più su come applicare uno stile alle immagini.