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. 容器中的容器——利用Dind实现开箱即用的K3s

    我在学习 Rancher 和 Minikube 的时候,发现它们都可以在自己的容器环境中提供一个 K3s 或 K8s 集群.尤其是 Minikube ,用户可以在它的容器环境中执行 docker ps ...

  2. day8 基本数据类型之字典

    day8 基本数据类型之字典 一.字典(dict) 1.用途: 2.定义方式:在{}内用逗号分隔开多个元素,每个元素都是key:value的形式,其中value可以使任意类型,而key必须是不可变类型 ...

  3. 『学了就忘』Linux启动引导与修复 — 69、启动引导程序（grub）

    目录 1.启动引导程序(Boot Loader)简介 2.启动引导程序grub的作用 3.启动引导程序grub的位置 4./grub目录中其他的文件简单介绍 提示: 简单地说,Boot Loader就 ...

  4. vue3 使用 data、computed、methods

    简单数据ref复杂数据reactive 使用方法: // useCount.js import {ref,reactive,computed} from 'vue' export default fu ...

  5. Netty实现Socket

    Netty实现Socket 从Java1.4开始, Java引入了non-blocking IO,简称NIO.NIO与传统socket最大的不同就是引入了Channel和多路复用selector的概念 ...

  6. 解决CSV文件用Excel打开乱码问题

    这篇文章适合有一定编码基础的人看,纯手动解决乱码问题请参见: 转码保存后,重新打开即可. 转码操作如下: 编辑器->另存为->ASCII码格式文件/UTF-8含BOM格式->保存. ...

  7. 软件测试人员必备的linux命令

    1 目录与文件操作1.1 ls(初级)使用权限:所有人功能 : 显示指定工作目录下之内容(列出目前工作目录所含之档案及子目录). 参数 : -a 显示所有档案及目录 (ls内定将档案名或目录名称开头为 ...

  8. centos7.4 64位安装 git

    参考博客:Linux Jenkins配置Git 1. git --version 查看有没有安装 过 git,没有则 继续 2. git 压缩包下载地址:https://mirrors.edge.ke ...

  9. 在html页面通过绝对地址显示图片

    1.编辑tomcat中conf目录下的server.xml文件,在<Host></Host>中添加如下代码段 <Context path="/D" d ...

  10. 通过SSE（Server-Send Event）实现服务器主动向浏览器端推送消息

    一.SSE介绍 1.EventSource 对象 SSE 的客户端 API 部署在EventSource对象上.下面的代码可以检测浏览器是否支持 SSE. if ('EventSource' in w ...