如何为图片添加悬停显示文字的 CSS 效果-php教程-PHP中文网

如何为图片添加悬停显示文字的 CSS 效果

通过纯 CSS 实现图片悬停时平滑显示“Login”文字提示，无需 JavaScript，利用 figure/figcaption 语义化结构与 transform、opacity 和 transition 完成优雅交互动效。

通过纯 css 实现图片悬停时平滑显示“login”文字提示，无需 javascript，利用 `figure`/`figcaption` 语义化结构与 `transform`、`opacity` 和 `transition` 完成优雅交互动效。

要为登录图标（如 member_login1.png）添加悬停时显示“Login”文本的效果，推荐采用语义清晰、可维护性强的 HTML + CSS 方案。核心思路是：将图片与文字封装在 <figure></figure> 中，用 <figcaption></figcaption> 承载提示文本，并通过 CSS 控制其默认隐藏、悬停显隐及过渡动画。

✅ 推荐 HTML 结构（语义化 & 响应友好）

<div class="col-md-4">
  <div class="top-bar-right">
    <div class="social">
      <figure class="login-icon">
        @@##@@
        <figcaption>Login</figcaption></figure>
</div>
  </div>
</div>

? 注意：alt="Login" 提升可访问性；class="login-icon" 便于独立样式控制，避免影响其他 figure 元素。

✅ 核心 CSS 实现（含动效与适配）

.login-icon {
  width: 5rem;
  height: 5rem;
  clip-path: circle(50% at 50% 50%);
  cursor: pointer;
  position: relative;
  display: inline-block; /* 防止换行或宽度假设 */
}

.login-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: all 0.4s ease;
}

.login-icon figcaption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  color: white;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  opacity: 0;
  transition: all 0.6s ease;
  pointer-events: none; /* 确保鼠标穿透文字，持续触发 hover */
}

.login-icon:hover img {
  transform: scale(0.5);
  filter: blur(2px) brightness(85%);
}

.login-icon:hover figcaption {
  opacity: 1;
  transform: translate(-50%, -50%);
}

⚠️ 关键注意事项

避免全局 figure 样式污染：原答案中直接使用 figure{} 会影响页面所有 <figure></figure> 元素，务必限定作用域（如 .login-icon）；
响应式兼容：若在小屏幕下图标过小，可配合媒体查询调整 width/height 或 font-size；
性能优化：transform 和 opacity 属于 GPU 加速属性，确保动画流畅；避免对 width/height 或 top/left 做过渡；
可访问性增强：为图标添加 aria-label="Log in" 或保留 alt 属性，保障屏幕阅读器识别。