CSS 图像悬停/缩放在 chrome 中效果很好，但在 IE 中效果不佳

Question

我在一个网站上工作，我有一个带有 4 张图像的水平表格，我想在悬停时放大这些图像。我还有一个不透明效果，当悬停在上面时它们会变成实心的。它在 chrome 上效果很好，但它们的图像是 100% 不透明度，并且在 IE 上悬停时不会放大。

jsfiddle: https://jsfiddle.net/u9hk6x5y/

#hoverimage {
    text-align:center;  
    margin-left:13%;
    margin-right:13%;
    z-index: 9999;  
}

#hoverimage1 {
    width: 162px;
    float: left;
    margin-right: 10px;
    z-index:9999;
}

#hoverimage2 {
    width: 162px;
    float: left;
    margin-right: 10px;
    z-index: 9999;
}

#hoverimage3 {
    width: 162px;
    float: left;
    margin-right: 10px;
    z-index: 9999;
}

#hoverimage4 {
    width: 162px;
    float: left;
    margin-right: 10px;
    z-index: 9999;
}

#hovergallery{
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
transition-duration: 0.5s;
opacity: 0.8; /*initial opacity of images*/
margin: 0 20px 10px 0; /*margin between images*/
}

#hovergallery:hover{
-webkit-transform:scale(1.4); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.4); /*Mozilla scale version*/
-o-transform:scale(1.4); /*Opera scale version*/
-ms-transform:scale(1.4);
transform: scale(1.4);
opacity: 1;
}

Answer 1

您说的是4 images，但使用id selector，将其更改为class selector，因为每个页面的id 必须是唯一的

更新

这就是我所说的（对你所有的<img /> 标签执行此操作，顺便说一句，我刚刚检查并在 IE、Chrome 和 Firefox 上运行良好。

<img class="hovergallery" height="240px" width="162px"  src="images/toolreconditioninggraphic.png" />

.hovergallery{
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    opacity: 0.8;
    margin: 0 20px 10px 0;
 }

 .hovergallery:hover{
    -webkit-transform:scale(1.4);
    -moz-transform:scale(1.4);
    -o-transform:scale(1.4);
    -ms-transform:scale(1.4);
    transform: scale(1.4);
    opacity: 1;
}