Question

Currently I have a 3 column grid setup with images and a text overlay. The way I am achieving the effect is setting the grid underneath to blue and just decreasing the opacity of the img so it turns slightly blue so that the text above it will remain full opacity.

The problem I am running into is that whenever I hover over a image for the first time you will see a small flicker before the overlay completes but whenever I go back to hover over it again it is working fine.

I have tried switching where the hover is applied to no avail as well. I've tested on multiple browsers and they all seem to have the same issue, what could be causing this?

Here is a Codepen as well as a snippet below demonstrating the problem I am using pure 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

Try adding -webkit-backface-visibility: hidden; to the img element:

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

Updated Codepen: http://codepen.io/anon/pen/zrLQPa

UPDATE

An alternate solution.

Instead of manipulating the image itself, have you considered using a pseudo element on the images parent figure element?

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

New Codepen: http://codepen.io/anon/pen/gPjJJM

Image hover overlay flickering on first hover

1 个答案: