I made an example which you can find here: https://arendal.coffeecup.com/Not-Ingers-method.zip . I did this before I had read Michael's latest post, so I don't have any triangles.

But it contains an image link in a div, and on top of that, there is a layer (container-2) with two headings and a play icon. There is a second page with only a video in a div. The video has been set to autoplay, and for that to work, it needed to be muted. But the video controls are also there, so it can be set - manually - to play the sound.

I would never do this for a real site. If you have an overlay covering an image link, or anything else with a link, that link will not work. I've tried to demonstrate this by making the container-2 cover as much as possible of the image. When viewed on a normal sized PC screen, there is only a tiny strip of the image which is not covered by the overlay, and if that strip is clicked on, you will get to the other page. Clearly, if you only have a tiny overlay for e.g. just a button, you may avoid the problem.

Sorry, the link above was not complete. I have fixed that now. Just reload the page.

Thanks Inger. I'm learning....

Yes, you can add buttons to your existing mockups without deconstructing them. Try to export your mockup images as PNGs with a transparent background. Then, use a graphic design tool or code to overlay buttons onto the images. This way, you can enhance your mockups with interactive elements without starting from scratch.

Make the container holding the image and the other things a link container, that way everything inside that container will go to the target you set.

The container should be set to position = relative the image =absolute

you can set the container to flex to space its child elements accordingly