Overlaying text over image links with ACF Gallery images - php

Question

I'm creating a gallery with ACF and want every image in my gallery to have an effect where the image goes semi transparent and there is a text overlay in the center of each image with the caption. I've tried this which doesn't seem to work:
<?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; ?>
and my css is:
.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;
}
Anyone have any idea what I'm doing wrong here?

Answer 1

Make following changes in your CSS code.
.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>