css - 为什么悬停后移动图像 - 仅限 chrome

Question

悬停后的移动图像

只有铬！

在 google chrome 浏览器中查看我的页面：http: //qass.im/teeny/

现在悬停所有图像..

为什么悬停后移动图像？

.pin img{
width: 100%;
max-width:100%;
height:auto;
border-radius:3px 3px 0 0;
display:block;
opacity:0.5;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.pin img:hover{
 opacity:1;
 }

谢谢。

Answer 1

由于图像大小调整算法的不同（顺便说一句，我的机器图像中心在 Firefox 中“移动”），但不是在 chrome 中）-尝试使用您在 258x181px 列中使用的精确尺寸的图像-在这种情况下它不会是通过浏览器调整大小，移动效果将消失。