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

DDD

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

268人浏览过

来源于php中文网

原创

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 来构建画廊的整体布局，并确保文本在覆盖层中居中显示。

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

下载

样式实现

画廊基础布局

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

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

注意事项与总结

语义化HTML：确保使用 alt 属性为图片提供描述，这对于可访问性和SEO至

如何使用纯 CSS 实现导航栏中精准控制子菜单的显示与隐藏

如何使用纯 CSS 实现头部导航中精准控制子菜单的显示与隐藏

如何让元素隐藏在边框后方（CSS z-index 与伪元素遮罩技巧）

如何精准裁剪并覆盖图像的 div 元素

如何让图片的20%移出视口实现“半隐式”边缘展示效果

相关专题

CSS position定位有几种方式

有4种，分别是静态定位、相对定位、绝对定位和固定定位。更多关于CSS position定位有几种方式的内容，可以访问下面的文章。

2023.11.23

li是什么元素

li是HTML标记语言中的一个元素，用于创建列表。li代表列表项，它是ul或ol的子元素，li标签的作用是定义列表中的每个项目。本专题为大家li元素相关的各种文章、以及下载和课程。

436

2023.08.03

seo页面描述

一个好的SEO页面描述应该包含关键词、简明扼要地概括网页的主题和内容、具有吸引力、与网页内容相符，并且是独特的。它不仅可以帮助搜索引擎了解网页的内容，还可以吸引用户点击进入网页。因此，编写一个优秀的SEO页面描述对于网页的排名和点击率都非常重要。

218

2023.08.31

wordpress seo

WordPress网站SEO优化方法有：1、选择一个SEO友好的主题，具有清晰的代码结构，快速的加载速度和响应式设计；2、使用SEO插件，优化你的标题标签，元描述，关键字，XML站点地图等；3、优化你的内容，内容是SEO优化的核心；4、优化你的网站速度；5、创建友好的URL；6、使用内部链接；7、优化图像；8、使用社交媒体；9、定期更新你的网站；10、监控和分析你的网站等等。

435

2023.09.18

SEO诊断方法有哪些

SEO诊断是一个综合性的工作，需要从网站结构、关键词优化、内容质量、外部链接、网站速度、移动友好性等多个方面进行评估和优化。通过进行SEO诊断，可以帮助网站提高在搜索引擎中的排名，从而增加流量和曝光度。

298

2023.10.09

SEO关键词排名工具有哪些

SEO关键词排名工具有Google关键词规划工具、百度关键词工具、SEMrush、Ahrefs、Moz Keyword Explorer、KWFinder、Ubersuggest、Keyword Surfer、AnswerThePublic和Google Trends。更多关于SEO关键词排名工具的文章，详情请继续阅读该专题下面的文章。php中文网欢迎大家前来学习。

390

2023.10.30

C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开，系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例，帮助开发者掌握构建高可用微服务系统的关键技术，提高系统的可扩展性与维护效率。

2026.03.11

Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开，系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示，帮助开发者构建稳定高效的 Go 并发任务处理系统，提高系统在高负载环境下的处理能力与稳定性。

2026.03.10

Kotlin Android模块化架构与组件化开发实践

本专题围绕 Kotlin 在 Android 应用开发中的架构实践展开，重点讲解模块化设计与组件化开发的实现思路。内容包括项目模块拆分策略、公共组件封装、依赖管理优化、路由通信机制以及大型项目的工程化管理方法。通过真实项目案例分析，帮助开发者构建结构清晰、易扩展且维护成本低的 Android 应用架构体系，提升团队协作效率与项目迭代速度。

2026.03.09

热门下载

网站特效

网站源码

网站素材

前端模板