Необходимо отображать подписи к изображениям внизу области просмотра, а не внизу страницы. ⇐ CSS

[Anonymous]

Мне нужно, чтобы подписи каждого изображения располагались по центру нижней части области просмотра, чтобы при прокрутке пользователем подписи всегда находились в одном и том же месте (при наведении).
Извините, если это неправильно изложено, я очень новичок в кодировании.
Мне не удалось связать реальные изображения, которые я использовал, поскольку они были помечены здесь спамом... поэтому макет не отображается так, как я бы желание.

Код: Выделить всё

.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;
}

Код: Выделить всё

[img]1.jpg[/img]
Caption for Image 1


[img]2.jpg[/img]
Caption for Image 2


[img]3.jpg[/img]
Caption for Image 3


[img]4.jpg[/img]
Caption for Image 4


[img]5.jpg[/img]
Caption for Image 5


[img]6.jpg[/img]
Caption for Image 6


[img]7.jpg[/img]
Caption for Image 7


[img]8.jpg[/img]
Caption for Image 8


[img]9.jpg[/img]
Caption for Image 9


[img]10.jpg[/img]
Caption for Image 10


[img]11.jpg[/img]
Caption for Image 11


[img]12.jpg[/img]
Caption for Image 12

Пропробовал много вариантов, в некоторых из них подписи оказались внизу по центру каждого изображения. , но никогда не в нижней части области просмотра, как хотелось бы.

Подробнее здесь: https://stackoverflow.com/questions/784 ... om-of-page