例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:;
            padding:;
            box-sizing:border-box;
        }
        .icon-img{
            display: block;
            margin-top: 5px;
            width: 140px;
            height: 140px;
            margin: 9px auto ;
            position: relative;
            overflow:hidden;
            border-radius:%;
        }
        .icon-img img{
              display:block;
              position: relative;
              border-radius:%;
              z-index: ;
              width: %;
              top: %;
              left: %;
              top: \;
              left: \;
              top: %\\;
              left: %\\;
              -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:%!important
        }
        .icon-img i{
          position:absolute;
          left:;
          top:;
          width:140px;
          height:140px;
          border:3px solid #f00;
          border-radius:%;
          z-index:;
        }
    </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的更多相关文章

  1. CSS 实现图片灰度效果 兼容各种浏览器

    CSS 实现图片灰度效果 兼容各种浏览器如360浏览器 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. ...

  2. CSS 实现图片灰度效果

    非原创-从网上收索出来的文章 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. 方式1. IE滤镜 img ...

  3. 向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. css实现图片闪光效果

    1.这个效果是看到京东商城上的一个下效果,原本的思路是 用js控制一个图片在某张需要闪光的图片上重复出现,但是 网上找了一些资料,竟然是用css写的,真是太帅了!!! 2.原理:在需要闪光的图片前添加 ...

  5. HTML和CSS实现图片翻转效果

    实现图片翻转,首先来分析一下我们希望实现的是怎样的翻转效果?又该如何去实现呢? 一.希望实现的效果 页面上的图片在光标悬停在上面的时候会发生翻转效果,翻转过后显示出背面的说明文字. 鼠标没有悬停在上面 ...

  6. iOS 加载本地 HTML 文件 CSS 样式图片无效果

    在开发的过程中,有时候需要加载一些 HTML 页面,对于不太复杂的界面,基本上都可以放到本地用 UIWebview 来加载,但是在开发过程中会碰到 UIWebview 加载出来的 HTML 页面没有图 ...

  7. (JS+CSS)实现图片放大效果

    代码很简单,在这里就不过多阐述,先上示例图: 实现过程: html部分代码很简单 <div id="outer"> <p>点击图片</p> &l ...

  8. CSS样式渐变代码，兼容IE8

    background: -webkit-linear-gradient(top,#ffffff,#f5f5f5); background: -moz-linear-gradient(top,#ffff ...

  9. css实现图片动画效果

    需求 项目里有个消息中心,当有消息的时候,小铃铛图标可以晃两下,提示当前有信息. 实现过程 书写css 使用css的keyframe属性,配合animation. @keyframes ringing ...

随机推荐

  1. 使用Dagger2创建的第一个小样例

    将Dagger系列的咖啡壶样例再做一下简化,作为Dagger2的入门的第一个小样例. 场景描写叙述:有一个电水壶,它使用一个加热器来烧水.电水壶具备的功能有:開始加热(on方法),结束加热(off方法 ...

  2. php，二维数组的输出出现了问题，提示：Notice: Array to string conversion

    <?php $arr=array(array("111","222","333"),array("444",&qu ...

  3. xBIM 基础07 创建WebBIM文件

    系列目录    [已更新最新开发文章,点击查看详细]  xBIM项目提供了一个IFC文件的Web查看器.当你想把IFC转换成紧凑的WexBIM时,需要 xBIM Essentials 和 xBIM G ...

  4. Nodemailer 报错

    { [Error: connect ECONNREFUSED] code: ‘ECONNREFUSED’, errno: ‘ECONNREFUSED’, syscall: ‘connect’ } 如果 ...

  5. 洛谷P2939 [USACO09FEB]改造路Revamping Trails(最短路)

    题目描述 Farmer John dutifully checks on the cows every day. He traverses some of the M (1 <= M <= ...

  6. 【算法】第二类斯特林数Stirling

    第二类Stirling数实际上是集合的一个拆分,表示将n个不同的元素拆分成m个集合的方案数,记为 或者 . 第二类Stirling数的推导和第一类Stirling数类似,可以从定义出发考虑第n+1个元 ...

  7. C++12.1.4 类的前向声明、不完全类型类

    只声明却没有定义的类称为—————–不完全类型,不完全类型不能定义该类型的对象,只能用于定义指向该类型的指针及引用,或者用于声明(不是定义)使用该类型作为形参类型或返回类型的函数. 在创建类的对象之前 ...

  8. pthread 的 api 分类

    pthreads defines a set of C programming language types, functions and constants. It is implemented w ...

  9. 3ds Max制作客厅场景实例教程

    附件系列 (图01) 让我们回顾一下场景:一个房间包括下列一件件家具, 在中间的一张小桌子,在房间的角落的一个小桌子,有一个垃圾桶和一个带镜子的边桌,有一个烛台.还有一个挂钟,窗帘,沙发和带手臂的椅子 ...

  10. echars自定义提示框位置

    tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)", position:function ...