Как сделать - название наложения изображения
Узнайте, как создать наложение заголовка изображения при наведении.
Заголовок наложения изображения
Наведите курсор на изображение, чтобы увидеть эффект наложения.
Как создать заголовок изображения наложения
Шаг 1) Добавьте HTML:
Пример
<div class="container">
<img src="img_avatar.png" alt="Avatar"
class="image">
<div class="overlay">My Name is John</div>
</div>
Шаг 2) Добавьте CSS:
Пример
* {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;
}
Совет: также см. другие эффекты наложения изображения (затухание, скольжение и т. д.) в нашем разделе «Как сделать — наложение изображения при наведении» .
Go to our CSS Images Tutorial to learn more about how to style images.