参考案例：

http://www.web-designers.cn/

http://www.harmay.com/

鼠标经过图片，图片放大。

1.html:

<body>

	<div>

		<a href="#"><img src="http://qq1234.org/uploads/allimg/140604/3_140604154539_2.jpg"></a>

	</div>

</body>

2.css:

div{ width: 200px; height: 200px; margin: 0 auto; border: 2px #64ecd2 solid;}

a{ display: inline-block;}

div img{ width: 200px; height: 200px;}

实现css3图片放大效果，需要用到transform和transition。

transform：旋转元素。transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。

Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。

Opera 只支持 2D 转换。

transition:过渡效果。transition: property（过渡效果的css3属性的名称） duration（完成过渡时间） timing-function（速度曲线） delay（何时开始）;

3.单纯的添加css3

div a:hover img{

		 transition:transform .5s ease-out;

                 -o-transition:transform .5s ease-out;

                -webkit-transition:transform .5s ease-out;

                -moz-transition:transform .5s ease-out;

                transform: scale(1.2);

                -ms-transform: scale(1.2);

                -webkit-transform: scale(1.2);

}

原图：

效果图：

发现，图片效果是有了，但是超出了我原有div的宽高。

所以，我在div中增加了 overflow:hidden; 属性。

效果图：

这样效果就达到了我需要的要求，具体大小细节可以修改

css3放大效果的更多相关文章

  1. 用CSS3实现对图片的放大效果

    用CSS3对图片放大效果 .right_div .topicons li a:hover img{     -webkit-transform:scale(1.5,1.5);     -moz-tra ...

  2. 浅谈CSS和JQuery实现鼠标悬浮图片放大效果

    对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...

  3. CSS3 loading效果全

    梦想天空 关注前端开发技术 ◆ 推动 HTML5 & CSS3 技术发展 ◆ 本博客全新站点:yyyweb.com 欢迎围观:) 首页 管理 订阅 网页设计 JavaScript jQuery ...

  4. js图片放大效果

    实现购物网站里的图片放大效果,jqzoom很好用.今天才接触它,很快就上手了.看了一个示例,在放大图像上方貌似有水印,后经排查,原来是图片的标题,然后设置title为false,搞定.

  5. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  6. Hover.css：一组超实用的 CSS3 悬停效果和动画

    Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...

  7. 10个实用的 CSS3 按钮效果制作教程

    人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...

  8. 学习制作精美 CSS3 按钮效果的10个优秀教程

    由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...

  9. Cool！15个创意的 CSS3 文本效果【下篇】

    这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...

随机推荐

  1. JS的兼容函数

    获取类名的兼容函数 //obj.getElementsByClassName 只能在现代浏览器中使用,不能在IE8以下使用 //两个参数 classname 类名 obj 范围 function ge ...

  2. C#Abstract抽象类的语法

    1. 抽象方法只能放在抽象类中,且不用实现(没有方法体); 2.抽象类中可以放非抽象方法; 3.抽象类不能实例化,只能实例化他的子类,是为子类"活着";

  3. CSS3样式

    1.边框 div{border:2px solid;border-radius:25px;-moz-border-radius:25px; /* Old Firefox */} border-radi ...

  4. [ASM C/C++] C语言数组

    固定长度的数组: 可以具有任何的存储类别. 长度可变的数组: 只能具有自动的生存周期(定义于语句块内,眀没有static修饰符). 名字必须为一般的标识符,因此结构或联合的成员不能是数组的标识符. 读 ...

  5. TTradmin v1.1 - 免端口映射穿透任何内网、基于radmin核心的即时远程协助

        TTradmin 是一款免端口映射可直接穿透任何内网,基于radmin核心的即时远程协助软件.在使用的时候只需要保证“协助端”和“被协助端”使用同一个验证码即可实现安全便捷的远程控制,不需要进 ...

  6. 英雄联盟网络测速 v1.3 全服全区取延时+取服务器维护状态+机房地理位置

    全服全区取延时+取服务器维护状态+机房地理位置 v1.2修复了服务器状态获取不准确的bug 下载链接: https://pan.baidu.com/s/1c1LHIY8 

  7. Android first---SQLite

    SQLite数据库 轻量级关系型数据库 创建数据库需要使用的api:SQLiteOpenHelper 必须定义一个构造方法: public MyOpenHelper(Context context, ...

  8. EF常用命令行

    启用迁移:指定迁移的目录和数据库上下文名称Enable-Migrations -MigrationsDirectory "MigrationsHis" -ContextTypeNa ...

  9. Learning by doing

    Learning by doing 绪论:读了娄老师的公众号中--<做中学(Learning By Doing)>这篇文章后,深有感触,我想到很多自己之前的事情,很多都是每每想的很好,总是 ...

  10. java编程者必收藏的十大学习网站-xiaolanglang123 -

    3S博客 http://blog.3snews.net/space.php?uid=13924628&do=blog&id=70282