为了实现图片与文本的叠加效果，我们需要在HTML中为每个画廊项 (
以下是建议的HTML结构示例：
<div class="gallery-container">
<ul class="gallery">
<li class="image">
@@##@@
<div class="image-name">图片名称一</div>
</li>
<li class="image">
@@##@@
<div class="image-name">图片名称二</div>
</li>
<!-- 更多画廊项 -->
</ul>
</div>在这个结构中：
CSS是实现叠加和悬浮效果的核心。我们将利用 position 属性来控制元素的堆叠顺序和位置，opacity 和 transition 来创建平滑的悬浮动画。
立即学习“前端免费学习笔记（深入）”；
首先，为画廊容器和列表项设置基础样式，确保布局的正确性。这里使用Flexbox来创建响应式的图片网格。
.gallery-container {
border: 2px black solid; /* 容器边框，便于观察 */
}
.gallery {
margin-top: 1em;
margin-bottom: 1em;
list-style: none; /* 移除列表默认样式 */
display: flex; /* 启用Flexbox布局 */
flex-wrap: wrap; /* 允许项目换行 */
flex-direction: row; /* 项目水平排列 */
margin-left: auto;
margin-right: auto; /* 居中画廊 */
align-items: center; /* 垂直居中项目 */
justify-content: center; /* 水平居中项目 */
gap: 10px; /* 项目之间的间距 */
}
.gallery li {
max-width: 40%; /* 每个列表项的最大宽度 */
}
img {
display: block; /* 图片作为块级元素 */
margin: 0.5em 0.5em; /* 图片内边距 */
max-width: 90%; /* 图片最大宽度 */
}这是实现叠加效果的关键部分。我们将对
.image { /* 针对每个 <li> 元素 */
position: relative; /* 1. 建立定位上下文 */
transition: 0.4s; /* 悬停时的过渡动画时间 */
cursor: pointer; /* 鼠标样式为手型 */
max-width: 90%;
margin-left: auto;
margin-right: auto;
display: flex; /* 2. 使用Flexbox居中内部内容 */
align-items: center;
justify-content: center;
}
.image-name { /* 针对文本叠加层 */
position: absolute; /* 3. 绝对定位，脱离文档流 */
color: ivory; /* 文本颜色 */
background-color: rgba(94, 88, 94, 0.7); /* 背景颜色，带透明度 */
padding: 10px 15px; /* 内边距 */
opacity: 0; /* 4. 初始状态为完全透明（隐藏） */
pointer-events: none; /* 确保文本层不阻挡鼠标事件到图片 */
text-align: center; /* 文本居中 */
/* 显式居中绝对定位元素 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap; /* 防止文本换行，如果文本较短 */
}
/* 悬停效果 */
.image:hover {
transform: scale(1.05); /* 鼠标悬停时图片略微放大 */
opacity: 0.8; /* 图片略微变暗 */
}
.image:hover .image-name {
opacity: 1; /* 鼠标悬停时文本完全显示 */
transition: 500ms; /* 文本显示过渡时间 */
}position: relative; on .image (the
display: flex; align-items: center; justify-content: center; on .image: 这些Flexbox属性用于在
position: absolute; on .image-name: 这使得文本层脱离了正常的文档流，可以自由地放置在父元素 (.image) 的任何位置，并且可以覆盖在其他元素（如图片）之上。
opacity: 0; on .image-name: 将文本层的初始不透明度设置为0，使其在页面加载时不可见。
top: 50%; left: 50%; transform: translate(-50%, -50%); on .image-name: 这是将绝对定位元素精确居中于其父元素的经典方法。top: 50%; left: 50%; 将元素的左上角移动到父元素的中心点，然后 transform: translate(-50%, -50%); 将元素自身向左和向上各移动其宽度和高度的一半，从而实现精确居中。
pointer-events: none; on .image-name: 这个属性使得文本层不响应任何鼠标事件（如点击、悬停）。这意味着当鼠标悬停在文本上时，实际上是悬停在下方的图片上，这对于实现.image:hover效果至关重要。
.image:hover .image-name { opacity: 1; transition: 500ms; }: 当鼠标悬停在
结合上述HTML和CSS，您将得到一个完整的、具有交互式悬浮文本效果的画廊。
<div class="gallery-container">
<ul class="gallery">
<li class="image">
@@##@@
<div class="image-name">第一张图片</div>
</li>
<li class="image">
@@##@@
<div class="image-name">第二张图片</div>
</li>
<li class="image">
@@##@@
<div class="image-name">第三张图片</div>
</li>
<li class="image">
@@##@@
<div class="image-name">第四张图片</div>
</li>
<li class="image">
@@##@@
<div class="image-name">第五张图片</div>
</li>
<li class="image">
@@##@@
<div class="image-name">第六张图片</div>
</li>
<li class="image">
@@##@@
<div class="image-name">第七张图片</div>
</li>
<li class="image">
@@##@@
<div class="image-name">第八张图片</div>
</li>
<li class="image">
@@##@@
<div class="image-name">第九张图片</div>
</li>
<li class="image">
@@##@@
<div class="image-name">第十张图片</div>
</li>
<li class="image">
@@##@@
<div class="image-name">第十一张图片</div>
</li>
<li class="image">
@@##@@
<div class="image-name">第十二张图片</div>
</li>
</ul>
</div>
body {
font-family: sans-serif;
background-color: #f0f0f0;
}
.gallery-container {
border: 2px black solid;
max-width: 1200px; /* 限制画廊最大宽度 */
margin: 20px auto; /* 居中容器 */
background-color: #fff;
padding: 10px;
}
.gallery {
margin-top: 1em;
margin-bottom: 1em;
list-style: none;
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: center;
gap: 15px; /* 增加间距 */
padding: 0; /* 移除默认内边距 */
}
.gallery li {
position: relative;
transition: transform 0.4s ease-out, opacity 0.4s ease-out; /* 统一过渡属性 */
cursor: pointer;
max-width: calc(33.33% - 10px); /* 适应三列布局 */
box-sizing: border-box; /* 边框和内边距包含在宽度内 */
overflow: hidden; /* 隐藏超出部分的图片缩放 */
border-radius: 8px; /* 圆角边框 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
/* 居中图片和文本 */
display: flex;
align-items: center;
justify-content: center;
}
.gallery li img {
display: block;
max-width: 100%; /* 图片填充整个 li 宽度 */
height: auto;
margin: 0; /* 移除图片默认外边距 */
transition: transform 0.4s ease-out, opacity 0.4s ease-out; /* 图片自身的过渡 */
}
.image-name {
position: absolute;
color: ivory;
background-color: rgba(94, 88, 94, 0.7); /* 半透明背景 */
padding: 10px 20px;
opacity: 0;
pointer-events: none;
text-align: center;
border-radius: 5px;
font-size: 1.2em;
font-weight: bold;
/* 显式居中绝对定位元素 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap; /* 防止文本换行 */
transition: opacity 0.5s ease-in-out; /* 文本显示过渡 */
}
/* 悬停效果 */
.gallery li:hover {
transform: translateY(-5px); /* 悬停时略微上浮 */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* 悬停时阴影加深 */
}
.gallery li:hover img {
transform: scale(1.08); /* 图片略微放大 */
opacity:以上就是CSS图片与文本叠加：构建交互式画廊悬浮效果教程的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
639
收藏
