CSS教程：在图片上叠加文本并实现悬停显示效果-html教程-PHP中文网

CSS教程：在图片上叠加文本并实现悬停显示效果

DDD

发布： 2025-09-30 12:49:29

原创

268人浏览过

CSS教程：在图片上叠加文本并实现悬停显示效果

本教程详细讲解如何利用CSS的定位（position）属性，在

元素中的图片上叠加文本，并实现鼠标悬停时文本渐显、图片缩放与透明度变化的交互效果。文章通过HTML和CSS代码示例，演示了如何构建一个响应式图片画廊，确保文本居中显示且不破坏原有布局，为用户提供直观的交互体验。

在网页设计中，尤其是在图片画廊或产品展示页面，我们经常需要实现鼠标悬停在图片上时，显示图片相关信息（如标题、描述）的效果。这要求文本能够精确地覆盖在图片上方，同时不影响页面的整体布局和响应性。本教程将详细介绍如何通过css的定位属性 (position) 结合 flexbox 布局，优雅地解决这一问题。

HTML 结构：图片与文本容器

首先，我们需要一个清晰的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>
    <!-- 更多图片项... -->
  </ul>
</div>

登录后复制

在这个结构中，.gallery-container 和 .gallery 用于构建画廊的整体布局，而每个 .image (即

元素) 内部则包含了一张图片和一个名为 .image-name 的 div，后者将用于显示悬停时的文本。

CSS 核心原理：定位与布局

实现图片上文本叠加的关键在于CSS的 position 属性。我们将利用相对定位 (position: relative) 和绝对定位 (position: absolute) 的组合。

父元素相对定位 (position: relative)：将
元素设置为 position: relative。这使得
成为其内部绝对定位子元素的参考系。这意味着，任何在其内部设置了 position: absolute 的元素，都将相对于这个
元素进行定位，而不是相对于整个文档。
立即学习“前端免费学习笔记（深入）”；
子元素绝对定位 (position: absolute)：将文本容器 (.image-name) 设置为 position: absolute。结合 top: 0; left: 0; right: 0; bottom: 0;，可以使其完全覆盖其相对定位的父元素 (
)。

除了定位，我们还将使用 Flexbox 来构建画廊的整体布局，并确保文本在覆盖层中居中显示。

Motiff

Motiff是由猿辅导旗下的一款界面设计工具，定位为“AI时代设计工具”

148

查看详情

样式实现

画廊基础布局

首先，为画廊容器和列表设置基础样式，使其呈现为响应式的图片网格。

.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; /* 项目间距 */
}

登录后复制

元素 (.image) 样式

每个

元素是画廊中的一个独立项。我们将为其设置相对定位，并使其内部内容（图片和文本）能够居中。

.image {
  position: relative; /* 关键：设置为相对定位，作为子元素绝对定位的参考 */
  transition: transform 0.4s, opacity 0.4s; /* 为悬停效果添加平滑过渡 */
  cursor: pointer; /* 鼠标悬停时显示手型光标 */
  max-width: 90%; /* 控制每个画廊项的最大宽度，根据需要调整 */
  margin-left: auto;
  margin-right: auto; /* 辅助居中 */
  display: flex; /* 启用 Flexbox */
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  overflow: hidden; /* 确保缩放的图片不会溢出 */
}

登录后复制

图片 () 样式

图片需要填充其父

元素，并保持其宽高比。

.image img {
  display: block; /* 移除图片底部默认空白 */
  max-width: 100%; /* 确保图片充满父容器 */
  height: auto; /* 保持图片宽高比 */
  margin: 0; /* 移除默认外边距 */
}

登录后复制

文本覆盖层 (.image-name) 样式

这是实现文本叠加的核心部分。文本容器将被绝对定位，覆盖整个

元素，并初始设置为透明不可见。

.image-name {
  position: absolute; /* 关键：设置为绝对定位 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; /* 使其完全覆盖父元素 .image */
  color: ivory; /* 文本颜色 */
  background-color: rgba(94, 88, 94, 0.8); /* 半透明背景，可根据喜好调整 */
  opacity: 0; /* 初始隐藏 */
  display: flex; /* 启用 Flexbox，用于文本内容居中 */
  align-items: center; /* 垂直居中文本 */
  justify-content: center; /* 水平居中文本 */
  text-align: center; /* 确保多行文本也能居中 */
  transition: opacity 500ms; /* 为文本显示添加过渡效果 */
  padding: 10px; /* 增加内边距 */
  box-sizing: border-box; /* 防止 padding 撑大元素 */
}

登录后复制

悬停交互效果

最后，为

元素添加 :hover 伪类，实现鼠标悬停时的动态效果。

.image:hover {
  transform: scale(1.05); /* 鼠标悬停时图片轻微放大 */
  opacity: 0.7; /* 图片变半透明，以便看到下方文本 */
}

.image:hover .image-name {
  opacity: 1; /* 鼠标悬停时文本完全显示 */
}

登录后复制

完整代码示例

将上述HTML和CSS整合，即可实现图片上叠加文本并带有悬停交互的画廊效果。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片文本叠加悬停效果</title>
<style>
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f4f4f4;
}

.gallery-container {
  max-width: 1200px;
  margin: 0 auto;
  border: 2px black solid; /* 示例边框 */
  padding: 10px;
  background-color: #fff;
}

.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: 10px;
  padding: 0; /* 移除默认内边距 */
}

.image {
  position: relative;
  transition: transform 0.4s, opacity 0.4s;
  cursor: pointer;
  max-width: calc(33% - 10px); /* 示例：每行3个，减去gap */
  flex-basis: calc(33% - 10px); /* 确保在flex布局中宽度计算正确 */
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* 隐藏溢出内容，尤其是在transform scale时 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 添加阴影效果 */
}

.image img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
}

.image-name {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: ivory;
  background-color: rgba(94, 88, 94, 0.8);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: opacity 500ms;
  padding: 10px;
  box-sizing: border-box;
  font-size: 1.2em;
  font-weight: bold;
}

.image:hover {
  transform: scale(1.05);
  opacity: 0.7;
  z-index: 1; /* 确保悬停元素在上方 */
}

.image:hover .image-name {
  opacity: 1;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .image {
    max-width: calc(50% - 10px); /* 两列布局 */
    flex-basis: calc(50% - 10px);
  }
}

@media (max-width: 480px) {
  .image {
    max-width: 100%; /* 单列布局 */
    flex-basis: 100%;
  }
}
</style>
</head>
<body>

<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>
  </ul>
</div>

</body>
</html>

登录后复制