Плавное изменение картинки при наведении курсора

В данной статья, я приведу пример, как сделать плавное изменение картинки при наведении курсора на чистом CSS и HTML.
В принципе, я просто оставлю код, а вы сможете посмотреть и если у вас будут вопросы, можете задать их в комментариях.

HTML

<div class=ImgField>
  <img class="image first" src="ссылка на картинку 1"/>
  <img class="image second" src="ссылка на картинку 2"/>
</div>

CSS

.imageFirst,.imageSecond {
border:2px solid transparent;
margin:0;
padding:0;
}

.imageFirst {
opacity:1px;
display:block;
position:absolute;
transition-duration:0.96s;
}

.imageFirst:hover {
opacity:0.00;
}
 
div.ImgField {
display:inline-block;
background-position:center center;
background-repeat:no-repeat;
margin:0;
padding:0;
}

Пример

Подписывайтесь на нас в соц. сети и на наш канал в telegram
Будьте в курсе новых статей и новостей 😉

Оставьте ответ

comment-avatar

*