例子：

<!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. 数组溢界地址的正确使用: 即 int a[6] 中的 a[-1] 和 a[6] 正确使用

    正如大家所知道的那样: 数组  int a[6] ,  编译器阅读到这句数组定义,会为分配6个int 类型的地址:a[0]  a[1]   a[2]   a[3]  a[4]  a[5].我们 能够正 ...

  2. php+mysql时报错：Unknown column '' in 'field list'解决方案

    答案来源:http://jingyan.baidu.com/article/9f7e7ec05c5ad76f281554ab.html 很多人在用php+MySQL做网站往数据库插入数据时发现如下错误 ...

  3. bzoj4590: [Shoi2015]自动刷题机(二分答案)

    4590: [Shoi2015]自动刷题机 题目:传送门 题解: 很明显的一道二分题. 对于二分性的判断:如果n越大,那么AC的题就越少,n越小,AC的题就越多,那么最大最小值都满足单调性,直接瞎搞. ...

  4. Linux就该这么学 20181003(第三章管道符)

    参考链接https://www.linuxprobe.com/ 输入输出重定向 标准输入重定向STDIN 文件描述符0 默认键盘输入 标准输出重定向STOUT 文件描述符1 默认输出到屏幕 错误输出重 ...

  5. [AH2017/HNOI2017] 礼物 解题报告 (FFT)

    题目链接: https://www.luogu.org/problemnew/show/P3723 题目: 我的室友最近喜欢上了一个可爱的小女生.马上就要到她的生日了,他决定买一对情侣手环,一个留给自 ...

  6. Kettle的四大不同环境工具

    不多说,直接上干货! kettle里有不同工具,分别用于ETL的不同阶段. 初学者,建议送Spoon开始.高手,是四大工具都会用. Sqoop: 图形界面工具,快速设计和维护复杂的ETL工作流.集成开 ...

  7. crontab任务调度

    基本语法 crontab [选项] 选项: -e:    编辑crontab定时任务 -l:    查询crontab任务 -r:    删除当前用户所有的crontab任务 2)参数说明 [root ...

  8. jQuery EasyUI 右键菜单--关闭标签/选项卡

    目录结构: noContextMenu.js 文件内容如下: $(function(){ //屏蔽右键菜单 $(document).bind("contextmenu", func ...

  9. 如何取未知Json字符串 某个主键取对应的Value

    需添加引用using Newtonsoft.Json; string strJon  "Json 字符串"; JObject obj = JObject.Parse(strJon  ...

  10. Reactor Cooling ZOJ - 2314 上下界网络流

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