Jak na to – Název překryvného obrázku
Přečtěte si, jak vytvořit titulek překryvného obrázku při umístění kurzoru myši.
Název překryvného obrázku
Umístěním ukazatele myši na obrázek zobrazíte efekt překrytí.
Jak vytvořit titulek překryvného obrázku
Krok 1) Přidejte HTML:
Příklad
<div class="container">
<img src="img_avatar.png" alt="Avatar"
class="image">
<div class="overlay">My Name is John</div>
</div>
Krok 2) Přidejte CSS:
Příklad
* {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;
}
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 .
Go to our CSS Images Tutorial to learn more about how to style images.