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

Question

你好来自 StackOverflow 的人们。 我正在尝试做与本网站完全相同的事情:http://anayafilms.com/ (工作部分)。 它基本上是一个图像，但在鼠标悬停时，它变暗，底部有一个文本和两个“按钮”(只是一些圆圈中的字体很棒的图标)，以及一些基本动画。 到目前为止，我只有一个 div 中的图像，不知道该怎么做，所以如果有人能帮助我，那就太棒了。

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

Answer 1

根据您真正需要它执行的操作，您也许可以在没有 javascript 的情况下执行此操作。这是一个使用 css 伪类 :hover 和一些绝对定位的示例。我正在使背景变暗，您可以将其设置为图像，方法是在其上方使用一个层，该层使用 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>