Как сделать - Наложение на изображение
Узнать, как создать эффект масштабирования наложения изображения при наведении.
Наложение на изображение
Наведите указатель мыши на изображение, чтобы увидеть эффект масштабирования.
Создать наложение на изображение
Шаг 1) Добавить HTML:
Пример
<div class="container">
<img src="img_avatar.png" alt="Аватар" class="image">
<div class="overlay">
<div class="text">Привет мир</div>
</div>
</div>Шаг 2) Добавить CSS:
Пример
/* Контейнер, необходимый для размещения наложения. Отрегулируйте ширину по мере необходимости */
.container {
position: relative;
width: 50%;
}
/* Сделайте изображение отзывчивым */
.image {
width: 100%;
height: auto;
}
/* Эффект наложения (полная высота и ширина) - накладывается поверх контейнера и поверх изображения */
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 100%;
transform: scale(0);
transition: .3s ease;
}
/* Когда вы наведете курсор мыши на контейнер, текст наложения будет "масштабироваться" на дисплее */
.container:hover .overlay {
transform: scale(1);
}
/* Некоторый текст внутри накладка, которая расположена посередине вертикально и горизонтально */
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}Редактор кода »Совет: Также смотреть другие эффекты наложения изображений (затухание, слайд и т.д.) в нашем учебнике Как сделать - Эффект наведения на изображение.
Зайдите на наш учебник CSS Изображения, чтобы узнать больше о том, как стилизовать изображения.
