来自StackOverflow的人们。 我正在尝试做一些与本网站完全相同的事情:http://anayafilms.com/(工作部分)。 它基本上是一个图像,但鼠标悬停,它变暗,底部的文本和两个“按钮”(只是一些字体中的一些字体很棒的图标),以及一些基本的动画。 到目前为止,我只有div中的图像,并且不知道如何做到这一点,所以如果有人能帮助我,那就太棒了。
Before and after, just to illustrate it in case you don't wanna go on the website
答案 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;