CSS图像悬停/缩放比例效果很好，但不是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必须是每个页面独特

UPDATE

这是什么我说（做这个为你所有的<img />标签，顺便说一句，我刚刚检查并且在IE浏览器ChromeFirefox上运行良好。

<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; 
}