Наложение текста поверх ссылок на изображения с изображениями галереи ACF

Question

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

<?php 

$images = get_field('gallery_image');
$size = 'full'; // (thumbnail, medium, large, full or custom size)
for ($i=0; $i<count($images); $i++) {
$images[$i]['custom_image_link'] = get_field('custom_image_link', $images[$i]['id']);
  }

if( $images ): ?>
<div>
    <?php foreach( $images as $image ): ?>
        <div class="gallery-container">
            <a href="<?php echo $image['custom_image_link']; ?>">
            <img class="gallery-img" src="<?php echo $image['url']; ?>" />
            <div class="gallery-overlay">
                <div class="gallery-text"><?php echo $image['caption']; ?></div>
            </div>
            </a>

        </div>


    <?php endforeach; ?>
</div>
<?php endif; ?>

, и мой CSS:

.gallery-container {
    position: relative;
    max-width: 100%;
}

.gallery-img {
    display: block;
    width: 100%;
    height: auto;
}

.gallery-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #fff;
}

.gallery-container:hover .gallery-overlay {
    opacity: 1;
}

.gallery-text p {
    color: black;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

Кто-нибудь есть какие-либо идеи, что я здесь делаю неправильно?

Answer 1

Внесите следующие изменения в свой код CSS.

.gallery-container {
position: relative;
}

.gallery-img {
display: block;
width: 100%;
height: auto;
}

.gallery-overlay {  
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition: .5s ease;
background-color: rgba(255,255,255,0.5);
display: flex;
align-items: center;
justify-content: center;
font-size: 50px;
}

.gallery-container:hover .gallery-overlay {
opacity: 1;
}

        <div class="gallery-container">
            <a href="#">
            <img class="gallery-img" src="http://via.placeholder.com/400x400" />
            <div class="gallery-overlay">
                <div class="gallery-text">text</div>
            </div>
            </a>
        </div>