Add overlay to thumbnail on hover

I’ve got most of this working fine, I have a row of 4 thumbnails and when clicking each one, my inline HTML pops up. To complete this, the last thing I would like to do is to add an overlay to the thumbnails on hover so I would like a coloured, transparent overlay to appear over the image plus some text (such as ‘click here”)

CSS wise, I could do it but as I am using a shortcode to add each image into my page, I wouldn’t know how to apply that css to a shortcode.

Is there anything baked in to this plugin that allows for overlays? If not, could anyone advise what I need to add to my code below to make this happen?

So using one of my thumbnails as an example (I’ve removed all the personal info related to my client):

`[wp_colorbox_media url=“#test_img1” type=”inline” hyperlink=“#”]
<div class=”desc-txt”>
<h3 style=”color: #6ea440; font-weight: bold; font-size: 22px;”>Name</h3>
Job Title
</div>

<div style=”display: none;”>
<div id=“text_img1” style=”padding: 20px 20px 20px 20px;”>
<h3 style=”color: #6ea440; font-weight: bold; font-size: 22px;”>Name</h3>
Job Title

Inline HTML content here.

</div>
</div>’

https://www.ads-software.com/plugins/wp-colorbox/