How to make a gif animation appear instead of it when hovering over a png image?

Question

css

The site has a png image, so that when you hover over it, another gif image appears.

Answer 1

Or replace the element with a div with a background:

.myImg {
  background: url('static.png');
}
.myimg:hover { 
  background: url('animation.gif');
}

Or via js, like this:

<img src="static.png" onmouseenter="this.src='animation.gif'" onmouseleave="this.src='static.png'">