Squarespace snippet - add to a page via "Page Header Code Injection" to add rollover of alt text to img with links

squarespace-hover-image-alt-tag.html

/*
* Add hover effect showing alt tag of images
* with Squarespace 7.1 fluid image containers
* John F Morton - https://supergeekery.com
*/

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const imageContainers = document.querySelectorAll('.fluid-image-container.sqs-image-content')

    imageContainers.forEach(container => {
      const anchor = container.querySelector('a')
      const img = container.querySelector('img')

      if (anchor && img && img.alt) {
        const overlay = document.createElement('div')
        overlay.className = 'image-overlay'
        overlay.innerText = img.alt
        anchor.appendChild(overlay) // Append the overlay inside the anchor element
      }
    })
  })
</script>
<style>
    /* Style the image container */
    .fluid-image-container.sqs-image-content {
        position: relative;
        overflow: hidden;
    }

    /* Style the anchor (a) tag */
    .fluid-image-container.sqs-image-content a {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
    }

    /* Style the image inside the anchor */
    .fluid-image-container.sqs-image-content img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* Overlay style */
    .fluid-image-container.sqs-image-content a .image-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.85rem;
        text-align: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out;
        pointer-events: none;
    }

    /* Show the overlay when hovering over the anchor */
    .fluid-image-container.sqs-image-content a:hover .image-overlay {
        opacity: 1;
        visibility: visible;
    }
</style>