css hover图片hover效果兼容ie8
生活随笔
收集整理的這篇文章主要介紹了
css hover图片hover效果兼容ie8
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
例子：
?
<!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>?
轉(zhuǎn)載于:https://www.cnblogs.com/zhujiasheng/p/7823478.html
總結(jié)
以上是生活随笔為你收集整理的css hover图片hover效果兼容ie8的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： POJ 3660 Cow Contest
- 下一篇： 2017-2018-1 《信息安全系统设