Making floating image transparent on hover causes it to 'jump'

Question

I want to make an image that's wrapped in an a tag darken on hover. To do this I simply made the wrapping a tag's background black and applied:

a:hover > img {
  opacity: .8;
  -webkit-transition: opacity .2s ease-out;
  transition: opacity .2s ease-out;
}

to the image.

This works, but I get a weird 'jumpy' issue when image element containers have float: left; or display: inline-block; applied. This only occurs on some images.

You can see this happening here when you hover over the middle image: https://jsfiddle.net/4566a85t/

Would anyone know how I could prevent this?

My code is:

HTML

<div class="wrapper">
    <a href="#">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTojc9ycyhwL6TnP_lEhQrTXy8Cjrs738WeDmnDOmIXGmR20NEJTw">
    </a>
</div>
<div class="wrapper">
    <a href="#">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTojc9ycyhwL6TnP_lEhQrTXy8Cjrs738WeDmnDOmIXGmR20NEJTw">
    </a>
</div>
<div class="wrapper">
    <a href="#">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTojc9ycyhwL6TnP_lEhQrTXy8Cjrs738WeDmnDOmIXGmR20NEJTw">
    </a>
</div>

CSS

.wrapper {
  width: 25%;
  float: left;
}

a {
  background: black;
  display: block;
}

img {
  width: 100%;
  margin: 0;
}

a:hover > img {
  opacity: .8;
   -webkit-transition: opacity .2s ease-out;
    transition: opacity .2s ease-out;
}

EDIT:

I tried using -webkit-filter: brightness(70%); with no black background, but had the same issue. Seems to be the transition that's the problem.

@MeltingDog I checked your jsfiddle, but I don't see any weird 'jumpy' issue you mentioned, tested on chrome and firefox and cute puppy! — Vincent1989, Oct 25 '17 at 01:43
I didn't either, until I made the window wider, then it jumps on hover. — fubar, Oct 25 '17 at 01:44
@Vincent1989 try making the viewing area as large as possible. Its more pronounced when it's larger. — MeltingDog, Oct 25 '17 at 01:44
@Vincent1989 sorry, no luck - same issue. Seems to be happening in your example too. — MeltingDog, Oct 25 '17 at 01:54
This should solve it - https://stackoverflow.com/questions/12980153/image-moves-on-hover-chrome-opacity-issue — fubar, Oct 25 '17 at 01:55
@MeltingDog - interesting. It fixed the problem for me in your fiddle. https://jsfiddle.net/4566a85t/3/ — fubar, Oct 25 '17 at 02:14

Vincent1989 · Answer 1 · 2017-10-25T02:18:03.530

I think you need to reset the browser default css first and add in -webkit-backface-visibility: hidden to image as suggested in the comments

*{
   margin: 0;
   padding: 0;
}

img{
   -webkit-backface-visibility: hidden;
}

Source:

image moves on hover - chrome opacity issue

Example:

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 25%;
  display: inline-block;
}

a {
  background: black;
  display: block;
}

img {
  -webkit-backface-visibility: hidden;
  width: 100%;
  margin: 0;
}

a>img {
  opacity: 1;
}

a:hover>img {
  opacity: .8;
  -webkit-transition: opacity .2s ease-out;
  transition: opacity .2s ease-out;
}

<div class="wrapper">
  <a href="#"><img src="https://i.pinimg.com/736x/e5/0d/17/e50d177765012ab2e70f8bccb5dc884a--pug-puppies-pug-dogs.jpg"></a>
</div>
<div class="wrapper">
  <a href="#"><img src="https://i.pinimg.com/736x/e5/0d/17/e50d177765012ab2e70f8bccb5dc884a--pug-puppies-pug-dogs.jpg"></a>
</div>
<div class="wrapper">
  <a href="#"><img src="https://i.pinimg.com/736x/e5/0d/17/e50d177765012ab2e70f8bccb5dc884a--pug-puppies-pug-dogs.jpg"></a>
</div>

MeltingDog · Answer 2 · 2017-10-25T06:03:41.423

0

EDIT: below will only work for Webkit browsers

OK got it!

I used -webkit-filter: brightness(); and set the initial img to -webkit-filter: brightness(100%);

My new code:

a > img {
  -webkit-filter: brightness(100%);
}

a:hover > img {
   -webkit-filter: brightness(70%);
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
   -ms-transition: all 1s ease;
   transition: all 1s ease;
}

Update fiddle: https://jsfiddle.net/4566a85t/2/

edited Oct 25 '17 at 06:03

answered Oct 25 '17 at 02:12

MeltingDog

14,310
43
165
295

You realise that'll only work in webkit browsers, right? – fubar Oct 25 '17 at 02:17
@fubar you're right. I reworked my code with your solution again and it seems to have worked. Thank you! – MeltingDog Oct 25 '17 at 06:03

babidi · Answer 3 · 2017-10-25T03:27:13.200

0

My theory is that when it starts to animate CSS doesn't know the right size that's why it's like adjusting during the first frames.

But if you will set a fixed width of the wrapper. e.g.

.wrapper {
  display: inline-block;
  width:100px;
}

Cheers!

edited Oct 25 '17 at 03:27

answered Oct 25 '17 at 02:13

babidi

506
5
6

Yep you are correct - applying the fixed width works. Thing is I don't want a fixed width. – MeltingDog Oct 25 '17 at 05:34

Making floating image transparent on hover causes it to 'jump'

3 Answers3