参考案例：

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. Node包管理工具

    Node包管理工具 只是简单的介绍一些工具的使用,有利于开发过程.除了介绍Node包管理工具,还介绍了前端打包工具,前端模块管理工具 Node包管理工具:    --npm    --cnpm    ...

  2. JVM之几种垃圾收集器简单介绍

    本文中的垃圾收集器研究背景为:HotSpot+JDK1.7 一.垃圾收集器概述 如上图所示,垃圾回收算法一共有7个,3个属于年轻代.三个属于年老代,G1属于横跨年轻代和年老代的算法. JVM会从年轻代 ...

  3. linux文件基本属性

    在Linux中第一个字符代表这个文件是目录.文件或链接文件等等. 当为[ d ]则是目录 当为[ - ]则是文件: 若是[ l ]则表示为链接文档(link file): 若是[ b ]则表示为装置文 ...

  4. 在SpringMVC框架下实现数据的国际化（即数据实现多国文字之间的转换）

    在eclipse中javaEE环境下:导入必要的架包 web.xml配置文件: <?xml version="1.0" encoding="UTF-8"? ...

  5. [原]excel启动时死锁

    项目中遇到的一个死锁问题!   代码大概如下: 调用SetWinEventHook安装了进程内钩子,dll注入到excel进程后,专门开启一个线程来分发监听到的事件信息,并在该线程内会获取IAcces ...

  6. 描述性统计分析－用脚本将统计量函数批量化&分步骤逐一写出

    计算各种描述性统计量函数脚本(myDescriptStat.R)如下: myDescriptStat <- function(x){ n <- length(x) #样本数据个数 m &l ...

  7. VS2015 使用 Web Deploy 发布网站到 WindowsServer2008 R2服务器详解

    使用原因:由于开发期间需要将开发出的网站随时提交到服务器以便公司高层随时访问所以要求将开发出的网站每天发布到服务器,频繁度比较高,因此不能再使用之前的方式(发布到本地后再拷贝文件到服务器),所以想到了 ...

  8. view animation

    动画分为 帧动画    drawable animation 补间动画 view animation 属性动画  property animation 作用效果: 加载信息时loading动画 act ...

  9. php的socket通信

    socket通常叫做'套接字',用于描述IP地址和端口,是一个通信链的句柄.应用程序通过套接字向网络发出请求或者应答忘了请求.socket既不是程序,也不是协议,其只是操作系统提供的通信层的一组抽象A ...

  10. CSS与JavaScript的一些问题汇总

    通过最近的学习,总结了一些问题,可能总结得不够完善,但是好记性不如烂笔头,先记在这儿,后面看到更完整的回答,再进行修改. 1.事件流,如何阻止冒泡事件流:在点击一个按钮时,实则,按的父容器与按钮的父容 ...