在悬停和其他CSS细节上使图片变暗

时间:2018-02-12 04:28:13

标签: javascript jquery html css web

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

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

1 个答案:

答案 0 :(得分:2)

根据您真正需要它做的事情,您可以在没有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>
&#13;
signInButton.getChildAt(0);
&#13;
&#13;
&#13;