[分享]css3图片鼠标经过

CSS3 动画使得在网站上添加更具有趣味性的元素变得更加容易。一项有趣的 CSS3 动画是能够在图片上添加鼠标经过效果来显示隐藏信息。这种效果能为用户提供更好的体验，向他们展示了更多关于你的产品或服务...

CSS3 动画使得在网站上添加更具有趣味性的元素变得更加容易。一项有趣的 CSS3 动画是能够在图片上添加鼠标经过效果来显示隐藏信息。这种效果能为用户提供更好的体验，向他们展示了更多关于你的产品或服务的信息。

img:hover {
  opacity: 0.5; // 设置鼠标经过时图片的透明度
  transition: opacity .5s ease-in-out; // 添加过渡动画，使得效果更加平滑美观
}
img:hover::after {
  content: attr(alt); // 显示图片的 alt 属性
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.8);
  color: #fff;
  padding: .5rem;
  font-size: .8rem;
  text-align: center;
} 

代码解释：

• 使用 :hover 选择器来选取鼠标经过时的图片元素

• 设置图片的透明度为 0.5，使得鼠标经过时图片变淡

• 添加过渡效果来使得过渡更加平滑

• 使用 ::after 伪元素在图片下方添加元素

• 使用 content: attr(alt) 显示图片的 alt 属性

• 添加黑色的半透明背景来使文字更加清晰可见

• 将文字定位在图片下方，并且居中对齐

一旦你使用了上述代码，你将能够在你的网站上添加有趣的鼠标经过效果，向用户提供更多关于你的产品或服务的信息。这种效果能够使得你的网站在用户眼中变得更加有趣和吸引人。