Putting text over each image in a grid html, css

i've created a grid/table of images, each square, and when you hover over them, the opacity lowers, and i want some text to fade in over the center of the picture. This is what I have so far:

  <div class="image-grid">      <div id="content">      <div id="row">        <div id="col">          <a href="https://open.spotify.com/track/6DXL2LZCZmAqXDzViDrEGJ?si=94lhNd2_Qoy_M5dWZRsKLQ" target="_blank"><img src="Images/13-xa pic2.png" /></a>        </div>      </div>      </div>    </div>  

I basically want a few words over each image. Not sure how to lay it out in code or style it. I want to retain my grid size and position. Thank you in advance!

https://stackoverflow.com/questions/67040935/putting-text-over-each-image-in-a-grid-html-css April 11, 2021 at 10:29AM