Search code examples
javascripttransitionfade

Adding a fade effect for onmouseover

I think there should be a simple solution to this, I just have no idea what it could be.

Here's my code:

<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>

the code works great! I simply want to add a nice fade transition for when the mouseover happens.

Any ideas?

I have tried a CSS3 alternative, but the issue with that code is that it isn't responsive, as you have to define either height or width. This solution is perfect given we can figure out this fade code.

Thanks in advance for the help!

Solution 

  • 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>