例子：

<!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. hdu1213 How Many Tables(并查集)

    How Many Tables Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  2. iOS UI08_UITableView

    (http://img.blog.csdn.net/20150808103801391) // // MainViewController.m // UI08_UITableView // // Cr ...

  3. Checkmarx VisualStudio plugin installation process.

    1-      Configuration of plugin VSTudio Prerequisite: -Your visual studio MUST be up to date with th ...

  4. Combobox下拉框两级联动

    下拉框的两级联动是我们开发中经常遇到一种情况.比如一个学生管理系统中,根据年级.科目及姓名查询学生考试成绩,年级和科目都是硬盘中的有限数据(数据库)而学生则可以有用户手动指定,这时在数据库中有年级和科 ...

  5. c#学习0216

    2017-03-02 out  关键字指定所给的参数为一个输出参数 该参数的值将返回给函数调用中使用的变量 注意事项 1未赋值的变量用作ref参数是非法的,但是可以把未赋值的变量用作out参数 2 在 ...

  6. vue如何给它的data值赋值

    activeDisplay的值如何改变 用$set();方法 vm.$set('b', 2) 或者 Vue.set(data, 'c', 3) this.someObject = Object.ass ...

  7. [CTSC1999]家园 分层图网络流_并查集

    Code: #include<cstdio> #include<vector> #include<algorithm> #include<queue> ...

  8. Hdu 2586 树链剖分求LCA

    Code: #include<cstdio> #include<cstring> #include<vector> #include<algorithm> ...

  9. logging.config模块---使用配置文件管理logger

    logging配置文件 一.使用到的模块: logging.config 官方文档: https://docs.python.org/3/library/logging.config.html 非官方 ...

  10. PHP XML To Array将XML转换为数组

    // Xml 转 数组, 包括根键,忽略空元素和属性,尚有重大错误 function xml_to_array( $xml ) { $reg = "/<(\\w+)[^>]*?& ...