我一直在尝试重新创建 https://andreas-demo.myportfolio.com/ 上的悬停双重效果
但是我似乎无法让两者都正确对齐,然后我无法获得悬停在整个部分上的效果,但这同时改变了:1- 使图像变暗,2- 反转颜色。
我希望能够在将鼠标悬停在整个 block 上时同时发生这两种影响,就像在上面的网站上一样^。
这是我的代码;
img {
display: block;
width: 60%;
height: 450px;
background-color: #f2f2f2;
!important;
-webkit-filter: brightness(100%);
}
a img:hover {
-webkit-filter: brightness(60%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.media {
background-color: #f2f2f2;
!important;
text-align: center;
}
p {
display: inline-block;
vertical-align: middle;
}
<div class="container">
<a href="">
<div class="media">
<img src="img/pexels-photo-733438.jpeg" class="img-fluid" alt="Responsive image">
<p>PROJECT 1</p>
<p>2017</p>
</div>
</a>
</div>
最佳答案
在 container:hover 上,将容器背景颜色设置为黑色(默认为白色)并将图像不透明度设置为 0.5。
关于javascript - 在图像和文本 block 上重新创建 Adobe Portfolio 双悬停效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47956807/