Onmouseover not working

[Growly]

to test yourself

[Archibald]

It needs to be an <img> element.

Note passing of parameter to the function here:

Consider using addEventListener instead of putting onmouseover in the HTML.

[SamA74]

@Archibald

Consider using addEventListener instead of putting onmouseover in the HTML.

JS is one of my weaker subjects, but I’m aware that using in-lines events is not the done thing these days. Kind of the JS equivalent of using in-line styles over CSS.
It may look something like this:-

[Growly]

You cant do with videos?

[SamA74]

You would use a <video> element instead of <div> or <img>, but the principle is the same.

[Growly]

good

[Archibald]

The box needs to have the same aspect ratio as the image, otherwise the image will be stretched (unless you use CSS object-fit property)