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. Java8 Lambda表达式、函数式接口和方法引用

    目录 Java8 Lambda表达式和函数式接口 Lambda表达式 Lambda的使用 函数式接口FunctionalInterface Java内置四大核心函数式接口 方法引用 构造器引用 Jav ...

  2. HDFS01 概述

    HDFS 概述 目录 HDFS 概述 HDFS的产生背景和定义 HDFS产生背景 HDFS定义 优缺点 优点 缺点 组成 NameNode DataNode Secondary NameNode(2n ...

  3. 学习java 7.15

    学习内容: 进程:正在运行的程序 是系统进行资源分配和调用的独立单位 每个进程都有它自己的内存空间和系统资源 线程:是进程中的单个顺序控制流,是一条执行路径 单线程:一个进程如果只有一条执行路径,则称 ...

  4. 26. Linux GIT

    windows git 下载链接: Msysgit   https://git-scm.com/download/win 1 进入git bash进行第一次配置 git config --global ...

  5. nodeJs-process对象

    JavaScript 标准参考教程(alpha) 草稿二:Node.js process对象 GitHub TOP process对象 来自<JavaScript 标准参考教程(alpha)&g ...

  6. 艺恩网内地总票房排名Top100信息及其豆瓣评分详情爬取

    前两天用python2写的一个小爬虫 主要实现了从http://www.cbooo.cn/Alltimedomestic这么个网页中爬取每一部电影的票房信息等,以及在豆瓣上该电影的评分信息 代码如下 ...

  7. k8s之ansible安装

    项目地址:https://github.com/easzlab/kubeasz #:先配置harbor #:利用脚本安装docker root@k8s-harbor1:~# vim docker_in ...

  8. Function Overloading in C++

    In C++, following function declarations cannot be overloaded. (1)Function declarations that differ o ...

  9. springmvc资源文件访问不到，undefined,jsp引用js文件目录

    资源访问失败: 该模块下springmvc.xml文件中添加配置: <mvc:resources mapping="/js/**" location="/js/&q ...

  10. 记一次单机Nginx调优，效果立竿见影

    一.物理环境 1.系统是Centos 8,系统配置 2核4G,8M带宽,一台很轻的应用服务器. 2.站点部署情况.但站点部署两个实例,占用两个端口,使用nginx 负载转发到这两个web站点.  二. ...