Chrome中的悬停不透明度问题

Question

正在进行的站点：http://www.lazydayzzz.com/

嗨，伙计们，我遇到了一些悬停过渡的问题，这似乎只发生在chrome中
当用户将鼠标悬停在瓷砖上时，div的背景颜色会发生变化，图像的不透明度会降低，图像上还会出现一个图标

在chrome中，它似乎会根据过渡的长度重新定位平铺中的图像。在firefox中，它工作得很好，我让它在chrome中工作，直到我开始以某种方式设计页脚

问题似乎也只出在较小的瓦片上，因为对于较大的瓦片，过渡工作得很好。有人对可能的解决方案有什么想法吗
尽管此处提供了页面源代码，但如果需要，我可以添加代码段
该网站是与一些新闻学学生合作完成的一项作业

这是图像透明度下降的平铺图像的代码。

.griditemsmall a:hover img {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-o-transition: 0.5;
-moz-opacity: 0.5; 
opacity: 0.5;
-webkit-opacity: 0.5;
display:inline-block;
padding-bottom: 0;
}

.griditemtall a:hover img {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-o-transition: 0.5;
-moz-opacity: 0.5; 
opacity: 0.5;
-webkit-opacity: 0.5;
display:inline-block;
padding-bottom: 0;
}

这是为了调用悬停上的图标

.griditemtall a:hover .entypo-mute {
display:block;
margin-top: -180px;
}

Answer 1

你能发布你的代码吗？

去了我和过渡它工作得很好，这将是的问题

.griditemsmall {
display: inline-block;
background-color: #171818;
margin-bottom: 20px;
height: 260px;
-webkit-transition: all 300ms ease-in-out;/* Add this */
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}

或者类似的东西

.gridbottomentertainment,.griditemsmall {
-webkit-transition: all 300ms ease-in-out;/* Add this */
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}