Как сделать - Наложение иконки на изображение
Узнать, как создать эффект значка наложения на изображение при наведении курсора.
Наложение иконки на изображение
Наведите указатель мыши на изображение, чтобы увидеть эффект наложения.
Создать наложение иконки на изображение
Шаг 1) Добавить HTML:
Пример
<!-- Добавить библиотеку иконок -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<img src="img_avatar.png" alt="Аватар" class="image">
<div class="overlay">
<a href="#" class="icon" title="Профиль пользователя">
<i class="fa fa-user"></i>
</a>
</div>
</div>Шаг 2) Добавить CSS:
Пример
/* Контейнер, необходимый для размещения наложения. Отрегулируйте ширину по мере необходимости */
.container {
position: relative;
width: 100%;
max-width: 400px;
}
/* Сделайте изображение отзывчивым */
.image {
width: 100%;
height: auto;
}
/* Эффект наложения (полная высота и ширина) - накладывается поверх контейнера и поверх изображения */
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .3s ease;
background-color: red;
}
/* Когда вы наводите курсор мыши на контейнер, исчезает значок наложения */
.container:hover .overlay {
opacity: 1;
}
/* Значок внутри наложения расположен посередине вертикально и горизонтально */
.icon {
color: white;
font-size: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
/* При наведении курсора мыши на значок, измените цвет */
.fa-user:hover {
color: #eee;
}Редактор кода »Совет: Также смотреть другие эффекты наложения изображений (затухание, слайд и т. д.) в нашем учебнике Как сделать - Эффект наведения на изображение.
Зайдите на наш учебник CSS Изображения чтобы узнать больше о том, как стилизовать изображения.
