Html 悬停时对img应用不透明度

当我将鼠标悬停在图像上时，我试图对其应用不透明度。当我将不透明或过渡应用于我的

.imgAbout img

类时，它们都不起作用。不确定我还能在哪里应用不透明度使其工作。知道我做错了什么吗？这是我的CSS和HTML

HTML

---

我制作了一支笔来展示可能的解决方案： 我希望这就是你想要的，如果不是，一定要让我知道

当图像的父div悬停时，您希望选择该图像，因此它需要：

。父div:hover img

。然后您可以为它指定任何CSS属性

在您的CSS文件中，如下所示：

.imgAbout:hover img {
  background: #50b948;
  opacity: 0.6;
}

---

回答得很好。我想更进一步，为了明确起见，不是给

.imgAbout

中的任何

元素增加透明度，而是给

.imgAbout:hover img.img responsive

所需的特定图像增加透明度。谢谢Ivan，这对我帮助很大。唯一不起作用的是悬停时的颜色。我试着把它应用到我的

.imgAbout img

，但是没有用。不管怎样，我得到了它！将其添加到我的

.imgAbout

中起作用。

#about img {
  margin: 0 auto;
}

.imgAbout {
  position: relative;
}

.imgAbout img {
  display: block;
  height: auto;

  opacity: 1;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

.imgAbout img:hover {
  background: #50b948;
  opacity: 0.6;
}

.center-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center; 
}

.imgAbout .center-container .btn {
  visibility: hidden;
  opacity: 0;

  -webkit-transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
  -moz-transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
  -ms-transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
  -o-transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
  transition: visibility 0.2s ease-in-out,opacity 0.2s ease-in-out;
}

.imgAbout:hover .center-container .btn {
  visibility: visible;
  opacity: 1;
}

.imgAbout:hover img {
  background: #50b948;
  opacity: 0.6;
}