CSS hover picture hover effect compatible IE8

Example:

<! DOCTYPE html>"en">"UTF-8"> <title>Document</title> <style> *{margin:0; padding:0; Box-sizing:border-box; }. Icon-img{Display:block; Margin-top:5px;            width:140px;            height:140px; MARGIN:9PX Auto0;            position:relative;            Overflow:hidden; Border-radius: -%; }. Icon-img img{display:block;              position:relative; Border-radius: -%; Z-index:1; Width: the%; Top: -%; Left: -%; Top:0\9; Left:0\9; Top: -%\9\0; Left: -%\9\0; -moz-transform:translate (- -%,- -%); -ms-transform:translate (- -%,- -%); -o-transform:translate (- -%,- -%); -webkit-transform:translate (- -%,- -%); Transform:translate (- -%,- -%); -moz-transition:width. 3s; -ms-transition:width. 3s; -o-transition:width. 3s; -webkit-transition:width. 3s;        Transition:width. 3s; }. Icon-img:hover img {width: the%!Important}. Icon-img i{position:absolute; Left:0; Top:0;          width:140px;          height:140px;          BORDER:3PX solid #f00; Border-radius: -%; Z-index:2; }    </style>class="icon-img"> <i></i> ""Src="http://img.alicdn.com/bao/uploaded/TB1l3QFLpXXXXaoXVXXSutbFXXX.jpg"> </div></body>
CSS hover picture hover effect compatible IE8