Замена картинки с искажением при наведении

Как плавно заменить одно изображение на другое при наведении мыши, не меняя сам фон? Для этого нам понадобиться три изображения: два из них на прозрачном фоне (мужчина и женщина) и сам фон (пшеничное поле).

Замена картинки с искажением при наведении

HTML разметка

Поместим в контейнер imgBx две фотографии.


<div class="imgBx">
    <img src="img1.png">
    <img src="img2.png">
</div>

Замена картинки с искажением при наведении

Девушка на фоне

Поставим обе фотографии в центр страницы друг под другом и установим для класса imgBx фон с пшеничным полем. Фотография девушки окажется на этом фоне. А все что выходит за рамки размеров 400×500 пикселей, спрячем при помощи свойства 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);/*возвращение назад и уменьшение*/
}

Источник