Image Movement on Hover: Addressing the Opacity Issue in Chrome

Users have reported an issue with images moving slightly to the right on hover, but only in Chrome. This issue arises from the use of opacity to control the image's transparency.

Inspecting the CSS

To investigate the problem, we examine the CSS provided:

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

Addressing the Issue

An alternative solution lies in utilizing the -webkit-backface-visibility property on the hover elements with opacity. This property affects how the element's back face renders when transformed. In this case, it addresses the unintended movement caused by opacity changes in Chrome.

Apply the following property to the hover state:

-webkit-backface-visibility: hidden;

Additional Considerations

The -webkit-backface-visibility property is specific to WebKit browsers, so you may need vendor prefixes for other engines. For more comprehensive information, refer to the CSS-Tricks documentation.