参考案例：

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. delphi强制WebBrowser控件使用指定版本显示网页

    function TFrmmain.WriteAppNameToReg:Boolean; var reg:TRegistry; sPath,sAppName:String; Sver:string; ...

  2. 我的nodejs学习之路1

    距离上次写文章类东西已经有4-5年了,猛然写东西有种提笔忘字的感觉. 言归正传,这是一篇记录我自己学习nodejs的文章,在写下这篇文章的时候我也不是什么大牛,也不是很了解nodejs这项技术.之所以 ...

  3. ISAP算法对 Dinic算法的改进

    ISAP算法对 Dinic算法的改进: 在刘汝佳图论的开头引言里面,就指出了,算法的本身细节优化,是比较复杂的,这些高质量的图论算法是无数优秀算法设计师的智慧结晶. 如果一时半会理解不清楚,也是正常的 ...

  4. 如何静态添加toolbar到datagrid

    这个示例向你展示如何添加toolbar到datagrid. 创建 DataGrid <table id="tt" class="easyui-datagrid&qu ...

  5. jQuery选择器方式-用的不多的name选择器

    id:$("#id") name:$("[name='name']") class:$(".class") element:$(" ...

  6. sql-删除无效sql链接

    create proc dtLink ( ) --数据库名称 ) as --查询临时表是否存在 if(OBJECT_ID('temp..db') is not null) begin drop tab ...

  7. Solr atomic update JSON方式

    http://yonik.com/solr/atomic-updates/ Solr supports several modifiers that atomically update values ...

  8. Oracle创建数据库

    Oracle创建数据库有三种方式:一.使用DBCA(Database Configuration Assistant 数据库配置助手):二.使用 create database指令:三.在安装数据库软 ...

  9. [地图SkyLine二次开发]框架(5)完结篇

    上节讲到,将菜单悬浮到地图上面,而且任何操作都不会让地图把菜单盖住. 这节带大家,具体开发一个简单的功能,来了进一步了解,这个框架. 1.想菜单中添加按钮 -上节定义的mainLayout.js文件里 ...

  10. servlet学习笔记_2

    一.Servlet线程安全问题1.servlet的线程安全问题.servlet引擎采用多线程的模式运行,它为并发的每个访问请求都预备一个线程来相应,但是由于只有一个servlet对象,因此,如果多个线 ...