悬停图像灰度 + 仅在悬停时可见

Question

我想同时实现我在标题中写的内容。

我有一个宽度为:100%(容器)的 div，在一个 div 中包含 4 个图像，每个图像占 25%(网格)，其中(上)有一个描述层 - 称为 desc，用于整体纯文本的尺寸和跨度。

这是 CSS:

.grid-container {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
}
.grid {
    width: 25%;
    float: left;
    position: relative;
}

.grid img {
    border-radius: 50%;
    transition: .4s -webkit-filter linear;
    -webkit-transition: background .5s ease 50ms;
    transition: background .5s ease 50ms;
}

.grid img:hover {
    filter: url(filters.svg#grayscale);
  /* Firefox 3.5+ */
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(1);
  /* Google Chrome & Safari 6+ */
  background: rgba(168, 202, 217, .6)
}

.desc {
    display: block;
    position: absolute;
    left: 26%;
    width: 87%;
    height: 100%;
    top: 0%;
    left: 0%;
    border-radius: 50%;

}

.desc:hover {
    background: rgba(168, 202, 217, .6)
}

.desc span {
width: 100%;
height: 100%;
text-align: center;
margin-top: 37%;
position: absolute;
left: 0;
top: 0;
font-size: 16px;
opacity: 0;
-webkit-transition: opacity .5s ease 50ms;
transition: opacity .5s ease 50ms;
color: #fff !important;
}

.desc span:hover {
    opacity: 1;
}

因此，我想要实现的是在鼠标悬停时使图像变为灰度，同时使描述可见。描述也有背景颜色(我可以将其与灰度滤镜一起应用于图像吗？)问题是这种方式的描述占据了整个图像，因此悬停只会被描述而不是图像考虑。

关于我如何实现我想要的目标的任何线索？感谢您的关注

最好的问候

Answer 1

很简单，将两个元素放在同一个容器中。例如，

.grid:hover img {
  filter: url(filters.svg#grayscale);
}

.grid:hover .desc span {
  opacity: 1;
}