Title and Excerpt Image Overlay

I’m looking to add a semi-transparent black bar, with a “title” (just h2 text) and “excerpt” (just smaller text) to the images on my home page, much like you’d see on a lot of popular sliders (I just need it on a static image). The image is currently inserted through a plain “text” widget, as I have various widget areas on my home page which are holding these images.

I’m stuck on a few key aspects of this:

-How to add the overlay in the first place.
-How to supply my “title”, “excerpt”, and make the entire area clickable (I need to link it to the pertaining content). This seems complicated due to how I’m currently using a text widget – a shortcode may work.

A good example of the visual look can be seen here at the following links:

https://www.sevendaysvt.com
https://www.burlingtonfreepress.com/

I’d love to keep this as performance friendly as possible, as site load speed is very important to me. A pure CSS solution is preferred, but if Jquery or somethign else is needed, that’s fine. Thank you very much for taking the time to help me, it’s much appreciated.