Come fare per - Titolo sovrapposizione immagine
Scopri come creare un titolo di sovrapposizione di immagini al passaggio del mouse.
Titolo sovrapposizione immagine
Passa il mouse sopra l'immagine per vedere l'effetto di sovrapposizione.
Come creare un titolo di immagine sovrapposta
Passaggio 1) Aggiungi HTML:
Esempio
<div class="container">
<img src="img_avatar.png" alt="Avatar"
class="image">
<div class="overlay">My Name is John</div>
</div>
Passaggio 2) Aggiungi CSS:
Esempio
* {box-sizing: border-box}
/* Container
needed to position the overlay. Adjust the width as needed */
.container {
position: relative;
width:
50%;
max-width: 300px;
}
/* Make the image to responsive */
.image {
display: block;
width: 100%;
height: auto;
}
/*
The overlay effect - lays on top of the container and
over the image */
.overlay {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0,
0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
/* When you mouse over the container, fade
in the overlay title */
.container:hover .overlay {
opacity: 1;
}
Suggerimento: vedi anche altri effetti di sovrapposizione dell'immagine (dissolvenza, diapositiva, ecc.) nel nostro Come fare per - Sovrapposizione immagine al passaggio del mouse .
Go to our CSS Images Tutorial to learn more about how to style images.