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. 巩固javaweb第十天

    巩固内容: HTML <meta> 元素 meta标签描述了一些基本的元数据. <meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析. META 元素通常用 ...

  2. R语言学习记录(一)

    (R基础) 对象:什么是对象呢,其实就是一个名称而已,在R中存储的数据 就是一个R对象 a <- 1 ###其中'<-'表示的是一个赋值符号 这句话表示的是,将1赋值给a b <- ...

  3. Zookeeper【概述、安装、原理、使用】

    目录 第1章 Zookeeper入门 1.1 概述 1.2 特点 1.3 数据结构 1.4应用场景 第2章 Zookeep安装 2.1 下载地址 2.2 本地模式安装 1. 安装前准备 2. 配置修改 ...

  4. [php反序列化] CVE-2020-15148(Yii2 反序列化漏洞) 漏洞复现

    漏洞影响范围 Yii2 < 2.0.38 环境搭建 Yii2.0.37 漏洞分析 首先定位到漏洞起始点 为什么是这儿?我们该怎么发现是某个类的某个函数?为什么不是其他函数? 一般是__destr ...

  5. 转 关于HttpClient，HttpURLConnection，OkHttp的用法

    转自:https://www.cnblogs.com/zp-uestc/p/10371012.html 1 HttpClient入门实例 1.1发送get请求 1 2 3 4 5 6 7 8 9 10 ...

  6. Oracle中的instr函数

    最近修改某个条件,由原来输入一个数据修改为可以输入多个,如图所示: 在实现时用到了regexp_substr函数进行分割连接起来的数据,查询时还用到了instr函数进行判断,但出现了问题,当子库存输入 ...

  7. 【Java 基础】Arrays.asList、ArrayList的subList注意事项

    1. 使用Arrays.asList的注意事项 1.1 可能会踩的坑 先来看下Arrays.asList的使用: List<Integer> statusList = Arrays.asL ...

  8. Quartz使用AutoFac依赖注入问题小结

    theme: channing-cyan highlight: a11y-dark 背景 最近在做一个需求,就是在Job中捕捉异常,然后通过邮件或者消息的方式推送给指定人员,在需求实现的过程中遇到的一 ...

  9. 『与善仁』Appium基础 — 21、元素的基本操作

    目录 1.元素的基本操作说明 (1)点击操作 (2)清空操作 (3)输入操作 2.综合练习 1.元素的基本操作说明 (1)点击操作 点击操作:click()方法.(同Selenium中使用方式一致) ...

  10. 手写Mybatis和Spring整合简单版示例窥探Spring的强大扩展能力

    Spring 扩展点 **本人博客网站 **IT小神 www.itxiaoshen.com 官网地址****:https://spring.io/projects/spring-framework T ...