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代码中进行以下更改。

＆＃13;

        <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>

＆＃13;

{{1}}

＆＃13;

使用ACF图库图像覆盖图像链接上的文本

1 个答案: