2

Here's the html simplified sample

<div class="big">
    <a href=".....">
        <img src=".....">
    </a>
</div>

css

.big {
    width: 33.3333%;
}
img:hover {
    opacity: 0.9;
    transition: opacity 0.4s;
}

When I hover above img, the opacity transition works fine, but the image flickering on span 0.4s, it's like resizing, like the Chrome recalculate the percentage size again within 0.4s.

Tried webkit transition, not fixing anything. Transition all, still happening.

This problem only happen on Chrome, no problem at all on Firefox. Only happen when using percentage, with fixed width works fine, but I need to use percentage on this one.

Thanks for any help

somuch72
  • 358
  • 4
  • 15

2 Answers2

0

You can try this:

a {display: block }
a img {transition: opacity 0.4s; max-width: 100%;}
a:hover img {opacity: 0.9}
Evgeny Korzun
  • 91
  • 3
  • Not working. The only solution for now is to put transition value to 0s, but I want it 0.4s if possible. I'm not saying Chrome igonring max-width, maybe because this flickering is in the transition time. The flickering is about 1mm to 2mm on 200px images. The original image is 300px, I can't make it smaller because this for responsive, i'm gonna need it this size. – somuch72 Nov 29 '15 at 14:36
  • Not working. Try this http://codepen.io/somuch72/pen/Qjedyy on Chrome. hover on any of those 3. If nothing happen, try resizing the Chrome. For better view, you can change the image. I guess i have to work around this with fixed width for full size and disable transition for responsive size. – somuch72 Nov 29 '15 at 17:43
0

This is what fixed it for me: max-width: calc(100% - 1px);

max-height I could leave at 100%; even though it was the height that was changing.

Tod
  • 2,070
  • 21
  • 27