javascript - 使悬停和其他CSS细节上的图片变暗

大家好，来自StackOverflow。
我正在尝试在此网站中执行完全相同的操作：http://anayafilms.com/（工作部分）。
它基本上是一幅图像，但是在鼠标悬停时，它会变暗，在底部显示一个文本和两个“按钮”（只是一个圆圈中的一些字体真棒图标）以及一些基本的动画。
到目前为止，我只将图片放在div中，却不知道该怎么做，所以如果有人可以帮助我，那就太好了。

Before and after, just to illustrate it in case you don't wanna go on the website

最佳答案

根据您真正需要它执行的操作，您可能可以在不使用JavaScript的情况下执行此操作。这是一个使用css伪类:hover和一些绝对定位的示例。我在背景上加了一层，使用opacity: .5创建的background: rgba(0,0,0,.5)黑色背景使背景变暗，您可以将其设置为图像。

.css-rollover {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.css-rollover:hover .overlay {
  opacity: 1;
  pointer-events: all;

}

.bg {
  width: 100%;
  height: 100%;
  background: red;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5);
  text-align: center;
  color: #fff;
  opacity: 0;
  pointer-events: 0;
  transition: opacity .2s;
}

.overlay p {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX( -50% );
}

.overlay .fa-links {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translateX(-50%) translateY(-50%);
}

.overlay .fa-links a {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height:20px;
  border-radius: 50%;
  margin: 5px;
  padding: 5px;
  background: blue;
  text-decoration: none;
  color: #fff;
}

<div class="css-rollover">
  <div class="bg" ></div>
  <div class="overlay">
    <div class="fa-links">
      <a href="#">A</a>
      <a href="#">B</a>
    </div>
    <p>You're hovering...</p></div>
 </div>

关于javascript - 使悬停和其他CSS细节上的图片变暗，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48739543/