例子：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="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 auto 0; ???????????position: relative; ???????????overflow:hidden; ???????????border-radius:50%; ???????} ???????.icon-img img{ ?????????????display:block; ?????????????position: relative; ?????????????border-radius:50%; ?????????????z-index: 1; ?????????????width: 95%; ?????????????top: 50%; ?????????????left: 50%; ?????????????top: 0\9; ?????????????left: 0\9; ?????????????top: 50%\9\0; ?????????????left: 50%\9\0; ?????????????-moz-transform: translate(-50%,-50%); ?????????????-ms-transform: translate(-50%,-50%); ?????????????-o-transform: translate(-50%,-50%); ?????????????-webkit-transform: translate(-50%,-50%); ?????????????transform: translate(-50%,-50%); ?????????????-moz-transition: width .3s; ?????????????-ms-transition: width .3s; ?????????????-o-transition: width .3s; ?????????????-webkit-transition: width .3s; ?????????????transition: width .3s; ???????} ???????.icon-img:hover ?img { ???????????width:105%!important ???????} ???????.icon-img i{ ?????????position:absolute; ?????????left:0; ?????????top:0; ?????????width:140px; ?????????height:140px; ?????????border:3px solid #f00; ?????????border-radius:50%; ?????????z-index:2; ???????} ???</style></head><body> ???<div class="icon-img"> ???????<i></i> ???????<img alt="" src="http://img.alicdn.com/bao/uploaded/TB1l3QFLpXXXXaoXVXXSutbFXXX.jpg"> ???</div></body></html> css hover图片hover效果兼容ie8
原文地址：http://www.cnblogs.com/zhujiasheng/p/7823478.html