例子：

<!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. 【跟我一步一步学Struts2】——拦截器

    前言 前面提到过拦截器.而且说拦截器仅仅能拦截Action.这里拦截器的调用体现了责任链模式.为什么说体现了责任链模式呢? 以下的一段话说的非常明确: Struts2将整个运行划分成若干同样类型的元素 ...

  2. UVALive 4223 / HDU 2962 spfa + 二分

    Trucking Problem Description A certain local trucking company would like to transport some goods on ...

  3. node10---GET请求和POST请求的参数

    GET请求的参数在URL中,在原生Node中,需要使用url模块来识别参数字符串.在Express中,不需要使用url模块了.可以直接使用req.query对象. ● POST请求在express中不 ...

  4. m_Orchestrate learning system---一、amazeui如何使用

    m_Orchestrate learning system---一.amazeui如何使用 一.总结 一句话总结:先花几分钟把所有功能稍微看一下,然后做的时候就会特别快,所以,多学习,学得越多做的越快 ...

  5. xBIM 高级02 插入复制功能

    系列目录    [已更新最新开发文章,点击查看详细]  IFC 模型中的合并和删除实体是一个非常重要的任务,因为 IFC 不是一个分层结构.它是一个复杂的结构,具有潜在的循环关系,是一个双向导航.在单 ...

  6. POJ 1952 DP

    思路: 这题要求最长下降子序列的长度和个数,我们可以增加 数组maxlen[size](记录当前第1个点到第i个点之间的最长下降序列长度) 和maxnum[size](记录1~i之间的最长下降序列个数 ...

  7. 洛谷P1339 [USACO09OCT]热浪Heat Wave(最短路)

    题目描述 The good folks in Texas are having a heatwave this summer. Their Texas Longhorn cows make for g ...

  8. 【原创】不重启was server重新加载应用class文件

    类装入和更新检测(Class loading and update detection settings)菜单路径:Applications < Application Types < W ...

  9. stm8s103 EEPROM烧程序时能否保留

    EEPROM的参数需要再烧录程序时保留,做试验测试是否能够保留 1.在ST Visual Develop中硬件仿真手动修改EEPROM的值. 2.在ST Visual Programmer中读取EEP ...

  10. 字符串的格式化(转自武sir)

    百分号s方式: (name)      可选,用于选择指定的key flags          可选,可供选择的值有: +       右对齐:正数前加正好,负数前加负号: -        左对齐 ...