/* --- OVERLAY TEXT ON GALLERY GRID HOVER --- */ /* 1. Target the gallery item container */ .gallery-grid-item { position: relative; } /* 2. Position the caption over the image and hide it */ .gallery-grid-item .gallery-caption { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); /* Change 0.7 to adjust darkness */ opacity: 0; transition: opacity 0.4s ease-in-out; display: flex; align-items: center; justify-content: center; pointer-events: none; /* Ensures the image remains clickable */ } /* 3. Make the caption appear when hovering */ .gallery-grid-item:hover .gallery-caption { opacity: 1; } /* 4. Style the text itself */ .gallery-grid-item .gallery-caption-content { color: #ffffff; /* Hex code for white text */ text-align: center; font-size: 1.2rem; padding: 20px; margin: 0; }

ADAM FERRARA