Adding TEXT over an image when you HOVER over it

This is my TEXT that wll loop within the size of the div.

Hover to make black/white

Hover to make colour
Hover over the next image to change it to another image
(This example changes the image in the <img> tag from one picture to another
but another way may be changing the style visibility: visible; to
visibility: hidden; and vice-versa)
Here's a thought (something I came across)...
When dealing with more than one picture you could consider creating
a variable that holds properties for each picture you want, eg...
In the HTML file you could have your image <img> set up as, eg...
<img id="picProp1" border="0" alt="Picture" width="100" height="100">
Then you could have (inside the <script>) tag...
const picList = {
tweety: "Images/Tweety.png",
wiley: "Images/WileHelp.jpeg",
top: "Images/Top.png"
};
The code using DOM...
document.getElementById('picProp1').src = picList.wiley;
or using JQuery you could say...
$("#picProp1").attr('src', picList.wiley);
Videos
Me ski-ing
The code for the video is as follows:-
<video src="videos/GarySki.mp4"
alt="Video of Gary trying to ski"
width="250"
controls>Video not supported</video>
Note...
The controls attribute is req'd to display the pause/play, etc buttons
If you want to see the VIDEO
information at w3schools for more - as the above works but the proper way is detailed there.
If you want just audio the see the AUDIO
information at w3schools for more.
More on VIDEO playback
You can set autoplay so the video starts automatically BUT this will ONLY
work if you also set it to be muted.
(you will need the controls option if you want to un-mute whilst playing)
If you want the playback to keep looping then add the loop command as well.
And if you do not want the PLAY/PAUSE/VOLUME controls showing then do not include the controls
command.
Apparently the accepted way of doing this is to now have the source (src) separate
from the video tag.
For example...
The below will autoplay/loop & be muted and include PLAY/PAUSE.
<video autoplay muted loop controls width="250">
<source src="videos/GarySki.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>