image moves on hover - chrome opacity issue

Question

There seems to be an issue with my page here: http://www.lonewulf.eu

When hovering over the thumbnails the image moves a bit on the right, and it only happens on Chrome.

My css:

.img{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:alpha(opacity=50);
    -moz-opacity: 0.5; 
    opacity: 0.5;
    -khtml-opacity: 0.5;
    display:block;
    border:1px solid #121212;
}
.img:hover{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100);
    -moz-opacity: 1; 
    opacity: 1;
    -khtml-opacity: 1;  
    display:block;
}

Answer 1

Had the same issue, My fix was putting the class before the src in the img tab.

Answer 2

backface-visibility (or -webkit-backface-visibility) only fixed the issue in Chrome for me. To fix in both Firefox and Chrome I used the following combination of above answers.

//fixes image jiggle issue, please do not remove
img {
  -webkit-backface-visibility: hidden; //Webkit fix
  transform: translate3d(0px,0px,0px); //Firefox fix
}

Answer 3

Having marked Rick Giner's answer as correct I then found out it did not fix the issue.

In my case I have responsive width images contained within a max-width div. Once the site width crosses that max width the images move on hover (using css transform).

The fix in my case was to simply amend the max width to a multiple of three, three columns in this case, and it fixed it perfectly.

Answer 4

Another solution would be to use

-webkit-backface-visibility: hidden;

on the hover element that has the opacity. Backface-visibility relates to transform, so @Beskow's has got something to do with it. Since it is a webkit specific problem you only need to specify the backface-visibility for webkit. There are other vendor prefixes.

See http://css-tricks.com/almanac/properties/b/backface-visibility/ for more info.

Answer 5

I encountered a similar issue in Safari 8.0.2, where images would jitter as their opacity transitioned. None of the fixes posted here worked, however the following did:

-webkit-transform: translateZ(0);

All credit to this answer via this subsequent answer

Answer 6

I ran into this issue with images in a grid each image was nested in an that had display: inline-block declared. The solution that Jamland posted above worked to correct the issue when the display: inline-block; was declare on the parent element.

I had another grid where the images were in an unordered list and I was able to just declared display: block; and a width on the parent list item and declared backface-visibility: hidden; on the image element and there doesn't seem to be any position shift on hover.

li { width: 33.33333333%; display: block; }
li img { backface-visibility: hidden; }