参考案例：

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. DP专题训练之HDU 1506 Largest Rectangle in a Histogram

    Description A histogram is a polygon composed of a sequence of rectangles aligned at a common base l ...

  2. Network of Schools --POJ1236 Tarjan

    Network of Schools Time Limit: 1000MS Memory Limit: 10000K Description A number of schools are conne ...

  3. 《利用python进行数据分析》读书笔记 --第一、二章 准备与例子

    http://www.cnblogs.com/batteryhp/p/4868348.html 第一章 准备工作 今天开始码这本书--<利用python进行数据分析>.R和python都得 ...

  4. 【前端】stopPropagation, preventDefault, return false的区别

    e.stopPropagation()阻止事件冒泡或者捕获 因为事件可以在各层级的节点中传递, 不管是冒泡还是捕获, 有时我们希望事件在特定节点执行完之后不再传递, 可以使用事件对象的 stopPro ...

  5. 怎样处理“error C2220: warning treated as error - no object file generated”错误

    最近用VS2010 编译ceflib开源库是出现"怎样处理"error C2220: warning treated as error - no object file gener ...

  6. HDU 1525 Euclid's Game 博弈

    Euclid's Game Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  7. WPF内置命令

    <Window x:Class="WpfCommands.MainWindow"         xmlns="http://schemas.microsoft.c ...

  8. ServerSocket

    在网上找ServerSocket看到的解释

  9. 【intellij idea】Project Structure 讲解

    项目的左侧面板 项目设置->Project Project Settings -> Modules Sources面板 Paths面板 dependencies面板 Project Set ...

  10. an interview question(2)

    感觉现在好多面试题还是很注重基础的,今天面试时就遇到这题,回来一查后才知道此题是国内某著名通信公司的一道机试题:) 给定一个数组input[ ],如果数组长度n为奇数,则将数组中最大的元素放到 out ...