I am looking to center the captions of each image at the bottom of the viewport, so that they stay in the same place when a user scrolls (on hover).
Sorry if this layout is incorrect, I'm still new to coding. I wasn't able to link the actual images due to them being flagged as spam here... which is affecting the desired layout.
.gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
padding: 20px;
position: relative;
/* Ensure .gallery is positioned */
}
.image-container {
position: relative;
overflow: hidden;
}
.image-container img {
width: 100%;
height: auto;
}
.caption {
position: fixed;
bottom: 20px;
/* Adjust as needed */
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 10px;
text-align: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease-in-out;
z-index: 2;
/* Ensure captions appear in front of images */
}
.image-container:hover .caption {
opacity: 1;
}<br>
<br>
<br>
<div class="gallery">
<div class="image-container">
<img alt="Placeholder Image 1" src="1.jpg">
<div class="caption">Caption for Image 1</div>
</div>
<div class="image-container">
<img alt="2.jpg" src="2.jpg">
<div class="caption">Caption for Image 2</div>
</div>
<div class="image-container">
<img alt="Placeholder Image 3" src="3.jpg">
<div class="caption">Caption for Image 3</div>
</div>
<div class="image-container">
<img alt="Placeholder Image 4" src="4.jpg">
<div class="caption">Caption for Image 4</div>
</div>
...
</div>I've tried various options, some resulting in the captions being centered at the bottom of each image, but never at the bottom of the viewport as desired.