图像前有阴影，悬停时无阴影。

Question

你好，我得到了这个图像，我试图使黑暗，当我悬停它，我希望它是正常的不透明度再次。这是我得到了多远。

.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>

然而，它的方式相反，我如何使它的图像是黑暗的开始和正常的悬停，感谢:)

Answer 1

有2种方法，请查看答案，首先，如果你想保留你所有的风格，只是想恢复它，那么反转不透明度使用在悬停和没有悬停的行为，第二，如果你只是想使用一个图像去黑暗，使用的是

 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>

Answer 2

这个怎么样？

.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>