Как сделать - Наложение заголовка на изображение
Узнать, как создать наложение заголовка на изображение при наведении курсора.
Наложение заголовка на изображение
Наведите указатель мыши на изображение, чтобы увидеть эффект наложения.
Создать наложение заголовка на изображение
Шаг 1) Добавить HTML:
Пример
<div class="container">
<img src="img_avatar.png" alt="Аватар" class="image">
<div class="overlay">Моё имя Андрей</div>
</div>Шаг 2) Добавить CSS:
Пример
* {box-sizing: border-box}
/* Контейнер, необходимый для размещения наложения. Отрегулируйте ширину по мере необходимости */
.container {
position: relative;
width: 50%;
max-width: 300px;
}
/* Сделайте изображение отзывчивым */
.image {
display: block;
width: 100%;
height: auto;
}
/* Эффект наложения - накладывается поверх контейнера и поверх изображения */
.overlay {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Черный прозрачный */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
/* При наведении курсора мыши на контейнер, исчезают в заголовке наложения */
.container:hover .overlay {
opacity: 1;
}Редактор кода »Совет: Также смотреть другие эффекты наложения изображений (затухание, слайд и т. д.) в нашем учебнике Как сделать - Эффект наведения на изображение.
Зайдите на наш учебник CSS Изображения, чтобы узнать больше о том, как стилизовать изображения.
