例子：

<!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. C++语言笔记系列之十八——虚函数（1）

    1.C++中的多态 (1)多态性:同一个函数的调用能够进行不同的操作,函数重载是实现多态的一种手段. (2)联编:在编译阶段进行联接.即是在编译阶段将一个函数的调用点和函数的定义点联接起来. A.静态 ...

  2. JAXB xml与javaBean的转换

    转自:https://blog.csdn.net/lydong_/article/details/79812626 `1. 1.不认识到犯错,然后得到永久的教训. 也不是所谓的教训吧,真正的教训来自于 ...

  3. gui编程实战——qq聊天界面1

    public class testDemo_2 extends JFrame{ JTextArea jta=null; //多行文本框组件 JScrollPane jsp=null; //滚动文本框 ...

  4. swift语言点评十五-$0

    import UIKitimport XCPlayground class ViewController: UIViewController { func action() { print(" ...

  5. SpringBoot学习笔记(1)----环境搭建与Hello World

    简介: Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配 ...

  6. 向ueditor中插入内容

    html在ueditor中插入内容不能直接插入,必须判断编辑器是否创建成功,jsp可以用java代码嵌套的方式. html页面中:<textarea id="zym" nam ...

  7. 前端路由的两种模式:hash(#)模式和history模式(转)

    随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...

  8. [USACO4.1]篱笆回路Fence Loops

    题目:USACO Training 4.1(在官网上提交需加文件输入输出).洛谷P2738. 题目大意:给你一张图里的边集,让你求出这张图的最小环. 解题思路:求最小环很简单,用Floyd即可.最重要 ...

  9. session 超时跳转登陆页面

    /** * session超时跳转登陆页面 * @author zhangdong * 2017年10月24日 */ @Aspect @Component public class SessionTi ...

  10. c++PrimerChap7类

    仅仅记录贴,按书上的做完了一边,想把private分离出来已经很难了.因为is用到的成员变量都是直接当做public使用的,如果要改的话可以考虑存储输入,让后用构造函数对类进行初始化. #includ ...