您的位置：首页 > Web前端 > CSS

css hover图片hover效果兼容ie8

2017-11-12 23:08 351 查看

例子：

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航