I have a problem with my icon when on hover. I want to replace my `img src` during on hover: heres my code so far:

```css
#aks {
  width: 0px;
  max-height: 0;
  transition: max-height 0.15s ease-out;
  overflow: hidden;
  background: url("https://img.icons8.com/windows/32/000000/like.png") no-repeat;
  padding: 50px;
}

#aks:hover {
  background: url("https://img.icons8.com/officexs/32/000000/like.png")
    no-repeat;
  max-height: 500px;
  transition: max-height 0.25s ease-in;
}
```

```html
<img id="aks" src="https://img.icons8.com/windows/32/000000/like.png" />
```

What I really want to achieve is when hovered on outline heart icon will replace with heart filled icon but during replacing the outline icon it will show/animate from bottom height 0 to full height so it look like it filled the outline icon. here some example: [codepen](https://codepen.io/caleuanhopkins/pen/penCB)

any alternatives or solutions other than this is highly appreciated.
thanks in advance!