HTML Code for Image/Text Overlay

Hello!

I am trying to make a text overlay with a white background when you hover over an image, and when you click the image it takes you to the corresponding page. I have 4 images I want to do this with. I added the HTML and CSS code and the text works, but the images are stuck as small thumbnails. I put most images in folders in my Asset Library and am not sure if my code is missing something that would help the images be found and actually show. Any tips are appreciated!

P.S: I did try to update to version 7.1 since most online resources/tutorials only mention that, but even after changing to the appropriate template, I am stuck on version 7.0... I don't mind that much if I can get the code to work.

Here is the HTML code I have as of now:

<div class="image-wrapper">
  <img src="https://www.alyssavandyart.com/s/Folder%20Name/Marker-Girl.jpg">
  <div class="overlay">
    <div class="overlay-text">Digital Design</div>
  </div>
</div>

<div class="image-wrapper">
  <img src="https://www.alyssavandyart.com/s/Folder%20Name/00.jpg">
  <div class="overlay">
    <div class="overlay-text">Page Layout</div>
  </div>
</div>

<div class="image-wrapper">
  <img src="https://www.alyssavandyart.com/s/Caricatures/OMITB.jpg">
  <div class="overlay">
    <div class="overlay-text">Caricatures</div>
  </div>
</div>

<div class="image-wrapper">
  <img src="https://www.alyssavandyart.com/s/Illustrations-Digital/Hot-Nugget-Summer.png">
  <div class="overlay">
    <div class="overlay-text">Sketchbook</div>
  </div>
</div>

Can you share link to page where you use code? We can check/test code easier.

@tuanphan Sure thing, here is a link to the site with the homepage: https://www.alyssavandyart.com/

The page in question should be the first thing you see with "Under Construction." Let me know if this helps!

@tuanphan Thanks so much! It worked right away 😄