Why does my image move on hover in Chrome and how can I fix it?

Image Moves on Hover - CSS Opacity Issue in Chrome

When hovering over the thumbnails on the web page linked below, the image moves slightly to the right, an issue only observed in Chrome.

http://www.lonewulf.eu

The following CSS is used:

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

While this issue may be related to transform, a more effective solution is to apply the following to the hover element that utilizes opacity:

-webkit-backface-visibility: hidden;

Backface-visibility influences transform, and specifying this property solely for WebKit is sufficient since it is a WebKit-specific problem. Other vendor prefixes may exist.

Refer to http://css-tricks.com/almanac/properties/b/backface-visibility/ for further information.

The above is the detailed content of Why does my image move on hover in Chrome and how can I fix it?. For more information, please follow other related articles on the PHP Chinese website!