时间戳

首页 > 解决方案 > 图像前阴影和悬停时取消阴影

html - 图像前阴影和悬停时取消阴影

问题描述

你好，我得到了这张我试图变暗的图像，当我悬停它时，我希望它再次成为正常的不透明度。这是我走了多远：

.man {
    position:relative;
    width:200px;
    height:200px;
}
.man img {
    width:100%;
}
.man:after {
    content:'Here is some text..';
    color:#fff;
    position:absolute;
    width:100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.6);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    z-index:1;
}
.man:hover:after {
    opacity:1;
}
<div class="man">
    <img src="https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=64" alt="" />
</div>

然而它的相反方式，我如何使它从一开始图像就更暗并且在悬停时正常​​，谢谢:)

标签： htmlcss

解决方案

有两种方法可以做到这一点，检查答案，首先，如果您想保留所有样式并且只想恢复它，然后在悬停时反转不透明度使用并且没有悬停行为，其次如果您只想使用图像去黑暗，使用

 img {
    filter: grayscale(100%);
 }


.man {
    position:relative;
    width:200px;
    height:200px;
}
.man img {
    width:100%;
}
.man:after {
    content:'Here is some text..';
    color:#fff;
    position:absolute;
    width:100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.6);
    opacity:1;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    z-index:1;
}
.man:hover:after {
    opacity:0;
}
<div class="man">
    <img src="https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=64" alt="" />
</div>

.man {
    position:relative;
    width:200px;
    height:200px;
}
.man img {
    width:100%;
    filter: grayscale(100%);
}
.man img:hover {
  filter: grayscale(0);
}

.man:hover:after {
    opacity:1;
}
<div class="man">
    <img src="https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=64" alt="" />
</div>

推荐阅读