参考案例：

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. 设置button键隐藏文字text

     新手的第一天,从最简单的view开始做起.首先先来做个最简单的button携带不可见文本,想要的时候,get它就行了. 编程的都知道,get .set方法,就不多介绍了. 创建一个类,MyButto ...

  2. Spring配置文件详解

      转自: http://book.51cto.com/art/201004/193743.htm 此处详细的为我们讲解了spring2.5的实现原理,感觉非常有用 spring配置文件是用于指导Sp ...

  3. android 弹出对话框之四周变暗处理方式

    设置对话框的dim值即可 WindowManager.LayoutParams lp=popDlg.getWindow().getAttributes(); lp.dimAmount = 0.0f; ...

  4. HTMl链接- target/ name

    下面解释一下链接标签的另外两个属性:target和name HTML 链接 - target 属性 使用 Target 属性,你可以定义被链接的文档在何处显示. 下面的这行会在新窗口打开文档: < ...

  5. Netty系列之Netty高性能之道

    转载自http://www.infoq.com/cn/articles/netty-high-performance 1. 背景 1.1. 惊人的性能数据 最近一个圈内朋友通过私信告诉我,通过使用Ne ...

  6. command 'x86_64-linux-gnu-gcc' failed with exit status 1错误及解决方案

    Ubuntu16.04安装Scrapy(pip install Scrapy)时提示错误如下: Failed building wheel for cryptography Running setup ...

  7. 30-React JSX IN DEPTH

    JSX IN DEPTH JSX 从根本上说,JSX只是提供了语法糖React.createElement(component, props, ...children)的功能.以下JSX代码: < ...

  8. linux常用命令汇总

    1. 文件及文件夹操作 1.1 修改文件名 mv abc ab 把文件名abc改为ab. 1.2 删除文件和文件夹 rm abc rm -rf abc 1.3 拷贝文件夹 格式: CP [选项]  源 ...

  9. placeholder右对齐的写法，兼容性比较高的一种方法

    placeholder右对齐的写法,如果你不考虑移动端的话,完全可以使用text-align:right,不过如果考虑移动端的话,在有一些手机上,即使你写了text-align:right,place ...

  10. [转]NandFlash和NorFlash的区别

    一． NAND和NOR的比较 NOR和NAND是现在市场上两种主要的非易失闪存技术.Intel于1988年首先开发出NOR flash技术,彻底改变了原先由EPROM 和EEPROM一统天下的局面.紧 ...