使用ACF Gallery实现图片半透明及标题叠加效果遇问题

我来帮你搞定这个ACF画廊的hover效果问题！你的代码大概率是因为缺少合适的HTML结构和配套CSS，导致想要的半透明+标题叠加效果没触发出来。下面是完整的解决方案：

首先是完善后的PHP逻辑，我们会给每张图片套上容器，同时处理自定义链接和标题字段：

<?php 
$images = get_field('gallery_image'); 
$size = 'full'; // 可替换为thumbnail/medium等自定义尺寸

if( $images ): 
    foreach( $images as $image ): 
        // 获取ACF自定义图片链接
        $custom_link = get_field('custom_image_link', $image['id']);
        // 获取图片标题：优先用ACF自定义标题，没有则用图片自带标题
        $image_title = get_field('image_title', $image['id']) ?: $image['title'];
?>
<div class="gallery-item">
    <?php if( $custom_link ): ?>
        <a href="<?php echo esc_url($custom_link); ?>" class="gallery-link">
    <?php endif; ?>
        <img src="<?php echo esc_url($image['sizes'][$size]); ?>" alt="<?php echo esc_attr($image['alt']); ?>" class="gallery-image">
        <div class="gallery-overlay">
            <span class="gallery-title"><?php echo esc_html($image_title); ?></span>
        </div>
    <?php if( $custom_link ): ?>
        </a>
    <?php endif; ?>
</div>
<?php 
    endforeach; 
endif; 
?>

接下来添加CSS样式，实现图片半透明+标题居中显示的交互：

/* 画廊项容器：负责定位标题层 */
.gallery-item {
    position: relative;
    display: inline-block; /* 可替换为grid/flex实现不同布局 */
    margin: 10px;
    overflow: hidden;
    width: 300px; /* 根据需求自定义宽度 */
}

/* 基础图片样式 */
.gallery-image {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease; /* 平滑过渡动画 */
}

/* 标题叠加层：默认隐藏 */
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* 可选：半透明背景增强标题可读性 */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* 标题文本样式 */
.gallery-title {
    color: #fff;
    font-size: 1.2rem;
    text-align: center;
    padding: 0 10px;
}

/* Hover触发效果 */
.gallery-item:hover .gallery-image {
    opacity: 0.5; /* 图片变为半透明 */
}

.gallery-item:hover .gallery-overlay {
    opacity: 1; /* 显示标题层 */
}

1. 用foreach循环替代for循环，代码更简洁易维护；
2. 通过相对+绝对定位实现标题层完全覆盖图片；
3. 加入transition属性让半透明和显示效果更平滑；
4. 兼容自定义链接需求：如果设置了custom_image_link，整个图片区域会变成可点击链接。

内容的提问来源于stack exchange，提问作者mmhnyc1220