Question

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

＆＃13;

.portrait {
  width: 25%;
  height: 100%;
}

.portrait:hover {
  opacity: 0.5;
}

＆＃13;

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

＆＃13;

悬停不处理所有img元素

0 个答案: