例子：

<!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. 嵌入式外部中断控制编程方法论—比較CC2541(51核)和S5PV210(ARM核)

    这是一篇阐述怎样对嵌入式SOC外部中断进行控制编程的方法论文章.希望读者理解本篇文章后.能够具备对市场上全部已经面世和将来面世的嵌入式芯片的外部中断进行控制编程的能力. 笔者原创的技术分享一直都恪守下 ...

  2. jQuery操作元素的属性与样式

    本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...

  3. 在openwrt上编译一个最简单的ipk包

    1 什么是opkg Opkg 是一个轻量快速的套件管理系统,目前已成为 Opensource 界嵌入式系统标准.常用于路由.交换机等嵌入式设备中,用来管理软件包的安装升级与下载. opkg updat ...

  4. DB-MySQL：MySQL 语句性能优化

    ylbtech-DB-MySQL:MySQL 语句性能优化 1.返回顶部 1. MySQL概述1.数据库设计 3范式2.数据库分表分库---会员系统() 水平分割(分页如何查询)MyChar .垂直3 ...

  5. [ZJOJ2014] 力 解题报告 (FFT)

    题目链接: https://www.luogu.org/problemnew/show/P3338 题目: 给出$n$个数$q_i$,令$F_j=\sum_{i<j}\frac{q_iq_j}{ ...

  6. jquery动态表格，动态添加表格行

    转载收藏于:https://www.cnblogs.com/zhangqs008/archive/2013/05/09/3618459.html 效果图:   Html:<html> &l ...

  7. 【原创】Apache和Tomcat实现动静分离

    集群中每个节点都启用了页面静态化功能,所以,为了防止单个节点刷新造成找不到页面问题,将每个节点刷新的页面都放入apache虚拟目录下,由apache统一来处理.静态页面由apache处理,动态页面仍然 ...

  8. Vue项目结合vux使用

    引入vux 1.直接安装或者更新: npm install vux --save 或者使用 yarn yarn add vux // 安装 yarn upgrade vux // 更新 2.vux2必 ...

  9. vue总线bus传值的一些问题

    动态组件中用总线Bus的坑 在我们的项目总难免会遇到用动态组件,这里就拿vue官方的例子为例,我们欲在组件中添加总线bus(其实官方推荐的vuex更好用,但是有时候我们只需要传一个小状态,不需要用vu ...

  10. javascript位操作符右移>>>的妙用

    var len=arr.length>>>0; 在arr.length为null或undefined的时间,强制转换为0;