Как наложить эффект при наведении курсора на изображение с помощью CSS
Вы хотите добавить на изображение верхний слой при наведении мыши с помощью CSS? Если да, то следуйте приведенным ниже инструкциям. В этой статье вы узнаете, как создать наложения эффектов на изображение при наведении курсора мыши. Мы создали накладываемое изображение без использования какого — либо кода JQuery.
Создайте файл с именем index.htmlи добавьте ниже код CSS перед закрытием тега head.
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .4s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 21px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
После этого добавьте ниже HTML-код. Пример ниже добавит текстовый эффект потускнения на изображение.
<div class="container"> <img src="img_avatar.png" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Привет мир</div> </div> </div>
Пример: Скольжение в верхней части
Вот еще один пример с различными эффектами изображения. Добавьте приведенный ниже код CSS в область head вашей HTML страницы.
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height:0;
transition: .4s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 21px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
Теперь добавьте HTML-код ниже, чтобы создать графический эффект скольжения вверху.
<div class="container"> <img src="img_avatar.png" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Привет мир</div> </div> </div>
Пример: Слайд слева
Добавьте приведенный ниже код CSS, прежде чем закрытием тега head.
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: .4s ease;
}
.container:hover .overlay {
width: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 21px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
Теперь добавьте ниже HTML-код для добавления изображения наложения эффекта cлева.
<div class="container"> <img src="img_avatar.png" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Привет мир</div> </div> </div>
Редактор: AndreyEx
