transform:scale()可以实现按比例放大或者缩小功能。
transition可以设置动画执行的时间，实现缓慢或者快速的执行动画，效果图如下：

源码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>css实现鼠标移入时的放大效果</title>

        <style type="text/css">

        	div{

        		width: 200px;

        		height: 300px;

        		margin:0 auto;

        		margin-top: 100px;

        	}

        	div img{

        		width: 100%;

        		height: 100%;

        		transition: all 0.6s;    //设置动画执行的时间为0.6s

        		cursor: pointer;

        	}

        	div img:hover{

        		transform: scale(1.2);     //设置图片按照比例放大1.2倍

        	}

        </style>

	</head>

	<body>

		<div>

			<img src="data:images/unnamed.jpg">

		</div>

	</body>

</html>

- 图片溢出div时遮罩：

源码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>css实现鼠标移入时的放大效果</title>

        <style type="text/css">

        	div{

        		width: 200px;

        		height: 300px;

        		margin:0 auto;

        		margin-top: 100px;

        		overflow: hidden;    //图片超出div部分隐藏

        	}

        	div img{

        		width: 100%;

        		height: 100%;

        		transition: all 0.6s;    //设置动画执行的时间为0.6s

        		cursor: pointer;

        	}

        	div img:hover{

        		transform: scale(1.3);     //设置图片按照比例放大1.3倍

        	}

        </style>

	</head>

	<body>

		<div>

			<img src="data:images/unnamed.jpg">

		</div>

	</body>

</html>

CSS实现鼠标移入时图片的放大效果以及缓慢过渡的更多相关文章

  1. css实现鼠标移入table时出现滚动条且table内容不移位

    一般是这样: 表格的标题和内容分别由一个table组成,其中表格内容的table由一个class="table-body"的div包裹.css如下 .tContainer .tab ...

  2. CSS3鼠标移入移出图片生成随机动画

    今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代 ...

  3. 基于jquery鼠标点击图片翻开切换效果

    基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  4. jQuery实现鼠标移入切换图片

    初始效果: 鼠标移入效果: 首先添加jQuery库,我这边直接引用百度CDN地址 <script src="https://apps.bdimg.com/libs/jquery/2.1 ...

  5. JS实现 鼠标放上去 图片自动放大的效果

    前段时间做项目,要实现,一张图片,鼠标放上去图片自动变大的效果,虽然难度不大,但当时也想了一段时间,当时没时间记录一下,现在有时间了,写篇博客把代码给记录一下: 效果如下: 代码如下: <!DO ...

  6. checkbox下面的提示框 鼠标移入时显示，移出时隐藏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. CSS和jQuery分别实现图片无缝滚动效果

    一.效果图 二.使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  8. 【学习笔记01】:hover为DIV添加鼠标悬停时改变颜色的效果

    :hover所有主流浏览器都支持(IE6.0以下支持不好,以后再学习用Javascript来实现悬停效果) 这是一个绿色底白色Icon的搜索按钮

  9. css实现鼠标经过导航文字偏位效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Freeswitch 安装爬坑记录1

    2 Freeswitch的安装 2.1 准备工作 服务器安装CentOS 因为是内部环境,可以关闭一些防火墙设置,保证不会因为网络限制而不能连接 关闭防火墙 查看防火墙 systemctl statu ...

  2. 静态库动态库的编译、链接， binutils工具集， 代码段\数据段\bss段解释

    #1. 如何使用静态库 制作静态库 (1)gcc *.c -c -I../include得到o文件 (2) ar rcs libMyTest.a *.o 将所有.o文件打包为静态库,r将文件插入静态库 ...

  3. Flink基础

      一.抽象层次 Flink提供不同级别的抽象来开发流/批处理应用程序. 最低级抽象只提供有状态流.它 通过Process Function嵌入到DataStream API中.它允许用户自由处理来自 ...

  4. 【排序算法】——冒泡排序、选择排序、插入排序、Shell排序等排序原理及Java实现

    排序 1.定义: 所谓排序,即是整理文件中的内容,使其按照关键字递增或递减的顺序进行排列. 输入:n个记录,n1,n2--,其对应1的关键字为k1,k2-- 输出:n(i1),n(i2)--,使得k( ...

  5. 【编程思想】【设计模式】【结构模式Structural】桥梁模式/桥接模式bridge

    Python版 https://github.com/faif/python-patterns/blob/master/structural/bridge.py #!/usr/bin/env pyth ...

  6. 【编程思想】【设计模式】【创建模式creational】抽象工厂模式abstract_factory

    Python版 https://github.com/faif/python-patterns/blob/master/creational/abstract_factory.py #!/usr/bi ...

  7. supervise安装与使用

    确认当前是否已经安装which supervise/usr/local/bin/supervise 软件下载安装-------------------------------------------- ...

  8. Selenium和PhantomJS

    Selenium Selenium是一个Web的自动化测试工具,最初是为网站自动化测试而开发的,类型像我们玩游戏用的按键精灵,可以按指定的命令自动操作,不同是Selenium 可以直接运行在浏览器上, ...

  9. 【MySQL】学生成绩

    统计每个人的总成绩排名 select stu.`name`,sum(stu.score) as totalscore from stu GROUP BY `name` order by totalsc ...

  10. 高可靠性——TSN 802.1Qci协议介绍

    TSN协议族根据实现功能可以分为:定时与同步.延时.可靠性和资源管理四个类别,往期的时间同步--TSN协议802.1AS介绍一文向大家介绍了定时与同步功能的核心--802.1AS协议,而在基于TSN工 ...