Jak to zrobić — tytuł nakładki obrazu
Dowiedz się, jak utworzyć tytuł nakładki obrazu po najechaniu myszą.
Tytuł nakładki obrazu
Najedź na obraz, aby zobaczyć efekt nakładki.
Jak utworzyć tytuł nakładki?
Krok 1) Dodaj kod HTML:
Przykład
<div class="container">
<img src="img_avatar.png" alt="Avatar"
class="image">
<div class="overlay">My Name is John</div>
</div>
Krok 2) Dodaj CSS:
Przykład
* {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;
}
Porada: Zobacz także inne efekty nakładki obrazu (zanikanie, slajd itp.) w naszym poradniku — Nakładka na obraz po najechaniu .
Go to our CSS Images Tutorial to learn more about how to style images.