Блог

По сути, я пытаюсь наложить изображение на значок ( display: none сначала), затем добавить эффект наведения, чтобы отобразить значок и сделать изображение непрозрачным. Это не работает.

Итак, есть ли какой-либо способ наложить значок поверх непрозрачного изображения?

Пример: https://jsfiddle.net/w084goLp/1 /

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

По сути, вам нужно переместить значок в .thumbnail оболочку, чтобы применить эффект при наведении курсора .thumbnail мыши. Затем вы просто можете установить display: block; указатель мыши, и появится ваш значок.

Вам также необходимо указать .icon z-index значение больше нуля из-за вашего позиционирования или вы помещаете его после уменьшенного изображения в своей разметке. Кроме того, вы можете легко разместить свой .icon в центре .thumbnail только потому, что он является его дочерним элементом.

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

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

Другая возможность (если у вас нет возможности поместить свой .icon внутри вашего .thumbnail ), вы можете поместить .icon после .thumbnail и использовать соседний селектор родственных элементов . Недостатком было бы то, что вы не можете использовать position для выравнивания .icon относительно .thumbnail .

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

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