Замена картинки с искажением при наведении
Как плавно заменить одно изображение на другое при наведении мыши, не меняя сам фон? Для этого нам понадобиться три изображения: два из них на прозрачном фоне (мужчина и женщина) и сам фон (пшеничное поле).
HTML разметка
Поместим в контейнер imgBx две фотографии.
<div class="imgBx">
<img src="img1.png">
<img src="img2.png">
</div>
Девушка на фоне
Поставим обе фотографии в центр страницы друг под другом и установим для класса imgBx фон с пшеничным полем. Фотография девушки окажется на этом фоне. А все что выходит за рамки размеров 400x500 пикселей, спрячем при помощи свойства overflow: hidden. Сейчас мы видим только одну девушку на фоне пшеницы.
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;/*правило расчета размеров блоков*/
}
body{
display: flex;/*flexbox сетка*/
justify-content: center;/*горизонтальное выравнивание*/
align-items: center;/*вертикальное выравнивание*/
min-height: 100vh;/*на вю высоту экрана*/
}
.imgBx{
position: relative;/*относительное позиционирование*/
width: 400px;/*ширина*/
height: 500px;/*высота*/
overflow: hidden;/*спрятать лишнее*/
background: url(bg.jpg);/*вставка фона*/
background-size: cover;/*на весь бокс с пропорциями*/
}
Наложение одной картинки поверх другой
Сейчас мы видим одновременно две фотографии.
.imgBx img{
position: absolute;/*абсолютное позиционирование*/
top: 0;/*позиция сверху*/
bottom: 0;/*позиция снизу*/
width: 100%;
height: 100%;
background-size: cover;
transition: 1s;/*плавный переход*/
pointer-events: none;
}
Hover-эффект
Обратимся к первому элементу (девушке) и применим прозрачность, фильтр размытия и трансформацию.
.imgBx img:nth-child(1){
opacity: 0;/*значение прозрачности*/
filter: blur(10px);/*сила размытия*/
transform: translateX(50%) scaleX(2);/*перемещение влево и увеличение*/
}
Как происходим смена картинок при наведении? Мы поо череди обращаемся то к первому элементу, то ко второму и играем с прозрачностью и трансформацией. Теперь на пшеничном поле всегда будет только одно изображение.
.imgBx:hover img:nth-child(2){
opacity: 0;
filter: blur(10px);
transform: translateX(-50%) scaleX(2);
}
.imgBx:hover img:nth-child(1){
opacity: 1;
filter: blur(0px);
transform: translateX(0) scaleX(1);/*возвращение назад и уменьшение*/
}
-
Создано 04.03.2022 10:41:27
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.