Добавление эффекта затухания для onmouseover - PullRequest
Новая
       51

Добавление эффекта затухания для onmouseover

0 голосов
/ 22 февраля 2019

Я думаю, что должно быть простое решение для этого, я просто не знаю, что это может быть.

Вот мой код: 

<a href="/online-dating">
<img src="https://static1.squarespace.com/static/51d45e1ce4b0ed5a1e73808b/t/5c6faba9971a18628dc5bc4a/1550822313198/1a_online-dating%402x.jpg">

onmouseover="this.src='https://static1.squarespace.com/static/51d45e1ce4b0ed5a1e73808b/t/5c6fabdeeb39313575ca52e2/1550822366487/1b_online-dating%402x.jpg'"

onmouseout="this.src='https://static1.squarespace.com/static/51d45e1ce4b0ed5a1e73808b/t/5c6faba9971a18628dc5bc4a/1550822313198/1a_online-dating%402x.jpg'"></a>

код отлично работает!Я просто хочу добавить хороший переход затухания, когда происходит наведение мыши.

Есть идеи?

Я пробовал альтернативу CSS3, но проблема с этим кодом заключается в том, что он не реагирует, так как вы должны определить высоту или ширину.Это решение идеально, учитывая, что мы можем выяснить этот код затухания.

Заранее спасибо за помощь!

1 Ответ

0 голосов
/ 22 февраля 2019 

div{
  width: 100%;
  background-image: url(https://static1.squarespace.com/static/51d45e1ce4b0ed5a1e73808b/t/5c6faba9971a18628dc5bc4a/1550822313198/1a_online-dating%402x.jpg);
  background-color: #fff;
  background-blend-mode: multiply;
  transition: background-color .4s;
  -webkit-transition: background-color .4s;
  -moz-transition: background-color .4s;
  -o-transition: background-color .4s;
  background-size: cover;
}

div:hover{
  background-color: red;
}

div img{
  width: 100%;
  opacity: 0;
  display: block;
}
<div>
  <img src="https://static1.squarespace.com/static/51d45e1ce4b0ed5a1e73808b/t/5c6faba9971a18628dc5bc4a/1550822313198/1a_online-dating%402x.jpg"/>
</div>
...