Why Do Images Shift Right on Hover in Chrome, and How to Fix It?

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:

<code class="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;
}</code>

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:

<code class="css">-webkit-backface-visibility: hidden;</code>

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.

The above is the detailed content of Why Do Images Shift Right on Hover in Chrome, and How to Fix It?. For more information, please follow other related articles on the PHP Chinese website!