Question

基本上我要做的是用图标覆盖图像（首先是display: none），然后添加悬停效果以显示图标并使图像不透明。它不起作用。

那么有没有办法在不透明的图像上叠加图标？

.icon {
  font-size: 10em;
  position: absolute;
  color: white;
}
img {
  // opacity: 0.7; // Cannot overlay opacified image?

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="icon">
  <i class="fa fa-play-circle-o" aria-hidden="true"></i>
</div>
<div class="thumbnail">
  <img src="https://cdn.lynda.com/courses/457872-635961558500122446_270x480_thumb.jpg">
</div>

Answer 1

基本上，您必须将图标移到.thumbnail包装中，才能将效果悬停在.thumbnail上方。然后你就可以在悬停时设置display: block;并显示你的图标。

您还需要.icon z-index大于零，因为您的positioning或者您将其放在标记中的缩略图之后。另外，您可以轻松地将.icon放在.thumbnail的中心位置，因为它是它的孩子。

＆＃13;

.thumbnail {
  position: relative;
  display: inline-block;
}
.icon {
  display: none;
  font-size: 10em;
  position: absolute;
  color: white;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.thumbnail:hover img {
  opacity: 0.7;
}
.thumbnail:hover .icon {
  display: block;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div class="thumbnail">
  <div class="icon">
    <i class="fa fa-play-circle-o" aria-hidden="true"></i>
  </div>
  <img src="https://cdn.lynda.com/courses/457872-635961558500122446_270x480_thumb.jpg">
</div>

＆＃13;

另一种可能性（如果您无法选择将.icon放入.thumbnail），可以在.icon后放置.thumbnail并使用相邻的兄弟选择器+。缺点是，您无法使用位置来调整.icon相对于.thumbnail的位置。

＆＃13;

.icon {
  display: none;
  font-size: 10em;
  position: absolute;
  color: white;
  z-index: 1;
  top: 0;
  left: 0;
}
.thumbnail:hover img {
  opacity: 0.7;
}
.thumbnail:hover + .icon {
  display: block;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div class="thumbnail">
  <img src="https://cdn.lynda.com/courses/457872-635961558500122446_270x480_thumb.jpg">
</div>
<div class="icon">
  <i class="fa fa-play-circle-o" aria-hidden="true"></i>
</div>

＆＃13;

用图标覆盖不透明图像

1 个答案: