css hover图片hover效果兼容ie8

最新推荐文章于 2022-07-20 17:46:00 发布

weixin_30483697

最新推荐文章于 2022-07-20 17:46:00 发布

阅读量256

点赞数

原文链接：http://www.cnblogs.com/zhujiasheng/p/7823478.html

版权

例子：

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

转载于:https://www.cnblogs.com/zhujiasheng/p/7823478.html

weixin_30483697

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css hover图片hover效果兼容ie8

例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0;...
复制链接

扫一扫