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. 日常Java 2021/10/17

    今天开始Javaweb编译环境调试,从tomcat容器开始,然后mysql的下载,连接工具datagrip,navicat for mysql,然后就是编写自己的sql,安装jdbc,eclipse连 ...

  2. Docker学习（二）——Docker容器使用

    Docker容器使用 1.Docker客户端       命令docker可以查看到Docker客户端的所有命令选项.       命令docker command --help更深入的了解指定的Do ...

  3. Android 开源框架Universal-Image-Loader加载https图片

    解决方案就是 需要 android https HttpsURLConnection 这个类忽略证书 1,找到 Universal-Image-Loader的library依赖包下面com.nostr ...

  4. idea2019.2安裝MybatisCodeHelper插件

    1. 下载MybatisCodeHelper插件 下载已破解的插件压缩包,一定注意校验sha1sum!!! 在IDEA中本地安装插件 激活方法(自2.7.3):IDEA顶部菜单:Tools -> ...

  5. my43_mysql内存相关概念

    相关参数 read_buffer_size https://dev.mysql.com/doc/refman/8.0/en/server-system-variables.html#sysvar_re ...

  6. java代码从出生到执行的过程浅析

    阅读<深入理解java虚拟机 第二版 JVM高级特性与最佳实践> - jdk版本为1.6 1.什么是编译型语言.解释型语言 解释型语言:源代码不是直接翻译成机器语言,而是先翻译成中间代码, ...

  7. 【Linux】【CentOS7】免密登录突然失效

    [报错解决]免密登录突然失效 哔哩哔哩 萌狼蓝天 博客:萌狼工作室-博客园 [问题描述] 原本配置好了的免密登录,今天启动hadoop发现免密登录失效了 [解决方案] 1.切换到管理员模式,进入配置文 ...

  8. Jenkins远程发布制品

    目录 一.简介 二.实现 一.简介 WEB服务很少会与Jenkins服务器在同一台机器,所以需要将构建好的制品包,发放到远程服务器进行部署. 二.实现 插件名:Publish over SSH 作用: ...

  9. shell脚本 awk实现查看ip连接数

    一.简介 处理文本,是awk的强项了. 无论性能已经速度都是让人惊叹! 二.使用 适用:centos6+ 语言:英文 注意:无 awk 'BEGIN{ while("netstat -an& ...

  10. 【dva】如何监听异步请求是否完成(页面loading)

    方案1.你可以在model里面操作 在model里面的state里面声明一个变量state,默认是false,effect函数执行开始就将其改为true,然后等call()然后结束后又将其改为fals ...