html - 悬停不适用于所有 img 元素

Question

我试图在悬停时为我的图像添加不透明度，但它似乎不起作用。我可以在悬停时放大图像并更改其他图像悬停时的不透明度，但不透明度和悬停的组合不适用于下面的图像。有任何想法吗？

.portrait {
  width: 25%;
  height: 100%;
}

.portrait:hover {
  opacity: 0.5;
}

<!--People-->
<section class='people' id='people'>
  <div class='photoContainer'>
    <h3>People</h3>
    <div class='flex'>
      <div class='portraitBlock' data-aos="zoom-in"></div>
      <img class='portrait' src='img/wes.png' alt='Wes Taylor' data-aos="zoom-in" data-aos-delay="250"></img>
      <img class='portrait' src='img/john.png' alt='John Taylor' data-aos="zoom-in" data-aos-delay="500"></img>
      <img class='portrait' src='img/larry.png' alt='Larry Kogut' data-aos="zoom-in" data-aos-delay="750"></img>
      <img class='portrait' src='img/kathy.png' alt='Kathy Stewart' data-aos="zoom-in" data-aos-delay="250"></img>
      <img class='portrait' src='img/sam.png' alt='Som Souvong' data-aos="zoom-in" data-aos-delay="500"></img>
      <img class='portrait' src='img/assoc1.png' alt='Ashley Jenkins' data-aos="zoom-in" data-aos-delay="750"></img>
      <img class='portrait' src='img/assoc2.png' alt='Savannah Frick' data-aos="zoom-in" data-aos-delay="1000"></img>
    </div>
  </div>
</section>

标签： htmlcssimagehoveropacity