html - 图像悬停叠加在第一次悬停时闪烁

Question

目前，我有一个包含图像和文本叠加层的 3 列网格设置。我实现这种效果的方法是将下方的网格设置为蓝色，并降低 img 的不透明度，使其略微变成蓝色，以便其上方的文本保持完全不透明。

我遇到的问题是，每当我第一次将鼠标悬停在图像上时，您会在覆盖完成之前看到一个小的闪烁，但每当我再次将鼠标悬停在该图像上时，它都工作正常。

我试过切换应用悬停的位置也无济于事。我在多个浏览器上进行了测试，它们似乎都有相同的问题，这可能是什么原因造成的？

这是一个 Codepen 以及下面的片段演示了我使用纯 css 的问题。

a {
  transition: all 200ms;
  color: #36C;
}
.no-padding {
  padding: 0
}

#masonry-grid figure {
  background: #36C;
}
#masonry-grid h1 {
  position: absolute;
  color: #FFF;
  border: 0;
  margin: 0;
  padding: 0;
  top: 85%;
  left: 10px;
  z-index: 1000;
  width: 93%;
  font-size: 1.5em;
  text-shadow: 1px 1px 1px #333;
  text-align: center;
}
#masonry-grid figure h1 {
  transition: .3s;
}
#masonry-grid figure:hover h1 {
  color: #FFF;
  text-shadow: 1px 1px 1px #000;
}

#masonry-grid figure img {
  opacity: 1;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
#masonry-grid figure:hover img {
  opacity: .5;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div id="masonry-grid" class="container">
  <div class="row">
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 no-padding masonry">
      <a href="/category/office-school">
        <figure>
          <h1>Office &amp; School Supplies <i class="fa fa-caret-right"></i></h1>
          <img src="/catalog/view/theme/lexus_megashop/image/mosaic/1_office-school.jpg" class="img-responsive" alt="">
        </figure>
      </a>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 no-padding masonry">
      <a href="/category/baopals-health">
        <figure>
          <h1>Health &amp; Well-Being <i class="fa fa-caret-right"></i></h1>
          <img src="/catalog/view/theme/lexus_megashop/image/mosaic/2_health-wellness.jpg" class="img-responsive" alt="">
        </figure>
      </a>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 no-padding masonry">
      <a href="/category/household-essentials">
        <figure>
          <h1>Household Essentials <i class="fa fa-caret-right"></i></h1>
          <img src="/catalog/view/theme/lexus_megashop/image/mosaic/3_household-essentials.jpg" class="img-responsive" alt="">
        </figure>
      </a>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 no-padding masonry">
      <a href="/category/culture-gifts-instruments">
        <figure>
          <h1>Musical Instruments <i class="fa fa-caret-right"></i></h1>
          <img src="/catalog/view/theme/lexus_megashop/image/mosaic/4_music.jpg" class="img-responsive" alt="">
        </figure>
      </a>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 no-padding masonry">
      <a href="/category/b-3249277-NBA">
        <figure>
          <h1>Official NBA Gear <i class="fa fa-caret-right"></i></h1>
          <img src="/catalog/view/theme/lexus_megashop/image/mosaic/5_nba.jpg" class="img-responsive" alt="">
        </figure>
      </a>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 no-padding masonry">
      <a href="/category/moto-bikes-scooters">
        <figure>
          <h1>Scooters <i class="fa fa-caret-right"></i></h1>
          <img src="/catalog/view/theme/lexus_megashop/image/mosaic/6_scooters.jpg" class="img-responsive" alt="">
        </figure>
      </a>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 no-padding masonry">
      <a href="/category/mens-grooming">
        <figure>
          <h1>Men's Grooming <i class="fa fa-caret-right"></i></h1>
          <img src="/catalog/view/theme/lexus_megashop/image/mosaic/7_mens-grooming.jpg" class="img-responsive" alt="">
        </figure>
      </a>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 no-padding masonry">
      <a href="/category/toys-kids-baby">
        <figure>
          <h1>Toys, Kids &amp; Baby <i class="fa fa-caret-right"></i></h1>
          <img src="/catalog/view/theme/lexus_megashop/image/mosaic/8_toy-kids-baby.jpg" class="img-responsive" alt="">
        </figure>
      </a>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 no-padding masonry">
      <a href="/category/womens-beauty">
        <figure>
          <h1>Women's Beauty <i class="fa fa-caret-right"></i></h1>
          <img src="/catalog/view/theme/lexus_megashop/image/mosaic/9_womens-beauty.jpg" class="img-responsive" alt="">
        </figure>
      </a>
    </div>
  </div>
</div>

Answer 1

尝试将 -webkit-backface-visibility: hidden; 添加到 img 元素:

#masonry-grid figure img {
    opacity: 1;
    -webkit-transition: .3s ease-in-out;
    transition: opacity .3s ease;
    -webkit-backface-visibility: hidden;
}

更新代码笔:http://codepen.io/anon/pen/zrLQPa

更新

另一种解决方案。

您是否考虑过在图像父图形元素上使用伪元素，而不是操作图像本身？

#masonry-grid figure::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #36C;

  opacity: 0;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

#masonry-grid figure:hover::before {
  opacity: .5;
}

新代码笔:http://codepen.io/anon/pen/gPjJJM