CSS 图片悬停/缩放在 chrome 但在 IE 中效果很好

Question

我在一个网站上工作，我有一个水平 table 有 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;
}

CSS 图片悬停/缩放在 chrome 但在 IE 中效果很好

CSS image hover / scale works great in chrome but not IE

css

image

scale

hover

opacity