hover не работает на всех элементах img - PullRequest
Новая
       40

hover не работает на всех элементах img

0 голосов
/ 25 мая 2018

Я пытаюсь добавить непрозрачность к своим изображениям при наведении, но, похоже, это не работает.Я могу увеличить изображение при наведении и изменить непрозрачность при наведении на другие изображения, но сочетание непрозрачности и наведения не будет работать на изображениях ниже.Есть идеи? 

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