css鼠标悬停时文字覆盖图片

2 years ago

source link: https://xushanxiang.com/css-image-overlay-hover.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

css鼠标悬停时文字覆盖图片

作者: xusx 分类: Web 发布时间: 2022-05-08 18:06 浏览：11

下面实现悬停时的图像叠加文字的效果。

分别对叠加层的顶部和底部条使用 :before 和 :after 伪元素。设置它们的不透明度 opacity 、缩放变换 transform 和过渡动画 transition 以产生所需的效果。
使用 figcaption 标签作为覆盖的文本。设置 display: flex; flex-direction: column; justify-content: center 使文本居中到图像中。
使用 :hover 伪选择器更新所有元素的不透明度和变换并显示覆盖。

<figure class="hover-img">
  <img src="https://xushanxiang.com/media/xu.jpg"/>
  <figcaption>
    <h3>许善祥</h3>
  </figcaption>
</figure>

Markup

.hover-img {
  color: #fff;
  display: inline-block;
  margin: 8px;
  max-width: 320px;
  min-width: 240px;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%;
}

.hover-img * {
  box-sizing: border-box;
  transition: all 0.45s ease;
}

.hover-img:before,
.hover-img:after {
  background-color: rgba(100, 100, 100, 0.5);
  border-top: 64px solid rgba(100, 100, 100, 0.5);
  border-bottom: 64px solid rgba(100, 100, 100, 0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  transition: all 0.3s ease;
  z-index: 1;
  opacity: 0;
  transform: scaleY(2);
}

.hover-img img {
  vertical-align: top;
  max-width: 100%;
  backface-visibility: hidden;
}

.hover-img figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1em;
  opacity: 0;
  z-index: 2;
  transition-delay: 0.1s;
  font-size: 24px;
}

.hover-img:hover:before,
.hover-img:hover:after {
  transform: scaleY(1);
  opacity: 1;
}

.hover-img:hover > img {
  opacity: 0.6;
}

.hover-img:hover figcaption {
  opacity: 1;
}

如果觉得我的文章对您有用，请随意赞赏。您的支持将鼓励我继续创作！

Recommend

新浪科技 tech.sina.com.cn 5 years ago
Cache

苹果获得悬停手势专利可隔空操控iPhone

新浪科技讯北京时间6月14日晚间消息，据PatentlyApple网站报道，美国专利与商标局（PTO）近日授予苹果公司一项悬停技术专利，允许用户通过手指或ApplePencil隔空操控设备。这项专利名为“通过基于接近度和基于接触的输入与用户

www.infoq.cn 5 years ago
Cache

出色的 CSS 图像悬停效果汇总

有了 CSS 的图像悬停特效，你就能毫不费力地在任何网站上实现漂亮的交互界面。悬停效果可能是 Web 设计中最常用的元素，主要是因为它很容易实现，还能显著改善用户体验。如果你不够小心谨慎的话，复杂的非 CSS 动画会明显拖慢你...

新浪科技 tech.sina.com.cn 4 years ago
Cache

论悬停技术，蜂鸟我是服气的，但蝙蝠有多努力你知道吗

来源：我是科学家iScientist说起脊椎动物里的悬停高手，大家可能最先想到蜂鸟。它们可以将长长的喙扎进花里，扑棱着翅膀保持身体在半空中纹丝不动，摆出一副定心凝神吃到饱的姿态。其实，除了蜂鸟，脊椎动物里还有另外一群鲜为人知的悬停高手——食

www.cnblogs.com 4 years ago
Cache

鼠标悬停添加遮罩及图标。

这个原理主要是使用了 ::before或者::after 这个伪元素，和 :hover 这个伪类，关于伪类和伪元素需要知道：伪类及在当前元素被出发后添加一些CSS样式，伪类与伪元...

www.hywel.cn 3 years ago
Cache

css3动画鼠标悬停动画效果

字体图标加鼠标悬停效果 CSS3 transition 属性transition 属性是一个简写属性，用于设置四个过渡属性： transition-property transition-duration transition-timing-function transition-delay

www.ifanr.com 3 years ago
Cache

新版 Photoshop 来了！悬停抠图、一键换季，还能和 AI 联动

如果你想看到与设计相关的黑科技，那一定不能错过每年的 MAX 创意大会。它在 2019 年带来了 Photoshop for iPad，2020 年带来了 AI 智能神经滤镜和天空替换，而今年的 MAX 创意大会，则为 Photoshop 带来了一位 AI 老师：Sensei AI。

www.fly63.com 2 years ago
Cache

css按钮悬停特效

css按钮悬停特效更新日期: 2022-05-11阅读量: 42标签: 特效分享

xushanxiang.com 2 years ago
Cache

css在悬停时显示附加内容

css在悬停时显示附加内容作者: xusx...

www.cnblogs.com 2 years ago
Cache

文字轮播与图片轮播？CSS 不在话下 - ChokCoco

今天，分享一个实际业务中能够用得上的动画技巧。巧用逐帧动画，配合补间动画实现一个无限循环的轮播效果，像是这样：

blog.51cto.com 2 years ago
Cache

CSS 文本阴影 text-shadow 悬停效果

本文将专注于使用 CSS text-shadow 属性来实现有趣的鼠标悬停效果，但是实际上并不会为这些文本制作任何文本阴影效果。 text-shadow 没有文字阴影？通过以下的gif图中的鼠标悬停效果，相信你能理解使用 text-shadow 却为什么没有阴影。

css鼠标悬停时文字覆盖图片

Recommend

About Joyk