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

Я создаю галерею с 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;
}

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