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