Question

当我将鼠标悬停在图像上时，我正尝试对图像应用不透明度。当我将其应用于.imgAbout img课程时，不透明度或过渡效果都不起作用。不确定我可以在哪里应用不透明度使其工作。我有什么想法可能做错了吗？这是我的CSS和HTML。

HTML

<div class="row">
    <div class="col-md-4">
      <div class="imgAbout">
        <img src="img/team/830x593.jpg" class="img-responsive" alt="Bio">

        <div class="center-container">
          <a class="btn btn-sm btn-primary" href="bios/teamBio.html">View More</a>
        </div>
      </div>

      <h1>First Name Last Name</h1>
      <h3>Chairman &amp; CEO<br> 
      Senior Wealth Advisor</h3>
    </div> <!-- end col-md-4 -->
</div>

CSS

#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;
}

Answer 1

我已经用笔来展示可能的解决方案：https://codepen.io/anon/pen/PzQPba 我希望这就是你要找的东西，如果没有，一定要让我知道。

您希望在父div被悬停时选择图像，因此需要：.parentDiv:hover img。然后，您可以为其指定任何CSS属性。

在你的CSS文件中它会是这样的：

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

在悬停时将不透明度应用于img

1 个答案: