0

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!

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
Ben Lusted
  • 13
  • 4

1 Answers1

1
  1. Put image and text inside the same container
  2. Put image inside a div with position relative
  3. Put text below image div, and set position to absolute
  4. Finally you can move the text inside that container with Top, Bottom, Left, Right.
Alexander Morales
  • 11
  • 2