Как сделать - наложение заголовка изображения при наведении
Узнайте, как создать наложение заголовка изображения при наведении указателя мыши.
Название наложения изображения
Наведите курсор на изображение, чтобы увидеть эффект наложения.
Создание заголовка изображения оверлея
Шаг 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;
}
Совет: Также увидеть другие эффекты наложения изображения (Fade, слайд, и т.д.) в нашем как-образ наведении наложения.
Перейдите на наш CSS Images учебник , чтобы узнать больше о том, как стиль изображений.