Adding TEXT over an image when you HOVER over it

My Link Area

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


Tweety Pic

Hover to make black/white

Tweety Pic

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)
Emu piccy


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;

Picture

or using JQuery you could say...
$("#picProp1").attr('src', picList.wiley);

Picture





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>



Top