php - 使用 ACF Gallery 图像在图像链接上覆盖文本
问题描述
我正在使用 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;
}
有人知道我在这里做错了什么吗?
解决方案
在您的 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>
推荐阅读
- javascript - 在Javascript中使用带有数字的charAt
- php - 无法在 php 中读取/写入文件
- algorithm - 我需要帮助来创建一个算法以从数字列表中返回可能的数字组列表
- reactjs - 如何从反应中的函数调用另一个文件中的另一个类组件
- sql - 更新查询损坏字符
- angularjs - 通过 $http 服务进行基于 AngularJS 令牌的身份验证
- avro - AVRO,将记录转换为数组
- tensorflow - 如何在 Keras 中实现屏蔽的 softmax 交叉熵损失函数?
- c# - 为什么作为消息发送后 DateTime 变量的默认值会更改?
- c - 如何停止输入换行符