使用CSS3实现鼠标移到图片上图片放大
转自 http://www.webkaka.com/tutorial/html/2017/072731/
在现在的网页设计中，鼠标移到图片上图片放大的效果常常被用到，这个效果多应用于文章列表里。我一开始以为是用JQuery来实现的，后来才知道原来是用CSS3来实现的。虽然用JQuery也能实现同样的效果，但用CSS3来实现会更加简单和方便。本文将介绍如何用CSS3来实现这个功能。
请把鼠标移到图片上
看到效果是：鼠标移到图片上时，图片会自动放大。
CSS3实现方法如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 200px;
height: 138px;
border: #000 solid 1px;
margin: 50px auto;
overflow: hidden;
}
#div1 img{
cursor: pointer;
transition: all 0.6s;
}
#div1 img:hover{
transform: scale(1.4);
}
</style>
</head>
<body>
<div id="div1">
<img src="demo.jpg" />
</div>
</body>
</html>
代码分析：
1、首先知道DIV和IMG的层次关系，IMG是在某DIV里面，图片放大后不应该超出DIV的盒子。
2、设置DIV的 overflow: hidden; 属性，作用是图片变大后超过DIV区域的部分会自动隐藏。
3、设置 transition: all 0.6s; 属性和 transform: scale(1.4); 属性，其中 transition: all 0.6s; 是变化速度，数值越小速度越快，而 transform: scale(1.4); 是变化范围， scale(1.4) 是放大1.4倍的意思。
实例二：图片放大不受限于DIV盒子
如果想图片放大后完全显示，而不是只显示DIV里的区域，那么我们只需把div的 overflow 属性去掉即可，不能设为 auto ，否则div出现滚动条。效果演示如下：
请把鼠标移到图片上
html代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 200px;
height: 138px;
border: #000 solid 0px;
margin: 50px auto;
/* overflow: hidden; */
}
#div1 img{
cursor: pointer;
transition: all 0.6s;
}
#div1 img:hover{
transform: scale(1.4);
}
</style>
</head>
<body>
<div id="div1">
<img src="demo.jpg" />
</div>
</body>
</html>
代码分析：
把div的 overflow 属性去掉，其他代码不变。
使用CSS3实现鼠标移到图片上图片放大的更多相关文章
- CSS3实现鼠标移动到图片上图片变大
CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义 <!DOCTYPE html><html> <head&g ...
- WPF中当鼠标移到按钮上时，按钮的背景图片消失的问题
如果给按钮设置了背景图片,当鼠标移到按钮上的时候,按钮就好变成一个浅蓝色的按钮,背景图片就消失了,对于这个问题有很多解决方法,我只分享一下我的解决方法. 我第一次用的方式是在按钮中添加一个图片,不用背 ...
- CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）
转载自:http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能. ...
- 用css3实现鼠标移进去当前亮其他变灰
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- JS事件 鼠标经过事件（onmouseover）鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。
鼠标经过事件(onmouseover) 鼠标经过事件,当鼠标移到一个对象上时,该对象就触发onmouseover事件,并执行onmouseover事件调用的程序. 现实鼠标经过"确定&quo ...
- 鼠标移到图片上图片放大【css3实例】
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 利用CSS3实现鼠标悬停在图片上图片缓慢缩放的两种方法
1.改变background-size属性 将图片作为某个html元素的背景图片,用transition属性改变图片的大小. .container{ background-size: 100% 100 ...
- jQuery实现鼠标移到元素上动态提示消息框效果
当光标移动到某些元素上时,会弹出像tips的提示框,这种效果想必大家都有见到过吧,下面有个不错的示例,大家可以感受下 当光标移动到某些元素上时,会弹出像tips的提示框. 复制代码代码如下: < ...
- 商品鼠标移过去hover效果---图片放大1.1倍
.home-standard-layout .middle-goods-list ul li:hover{ box-shadow: 0 0 10px gray;} .home-standard-lay ...
- jQuery实现鼠标放到图片上，放大图片
<script src="../../Script/jquery-1.7.2.js" type="text/javascript"></scr ...
随机推荐
- Solon2 之基础：四、应用启动过程与完整生命周期
串行的处理过程(含六个事件扩展点 + 两个函数扩展点),代码直接.没有什么模式.易明 提醒: 启动过程完成后,项目才能正常运行(启动过程中,不能把线程卡死了) AppBeanLoadEndEvent ...
- [IM002]Navicat ODBC驱动器管理器 未发现数据源名称并且未指定默认驱动程序
数据库 SQL SERVER 2008,连接时报:[IM002]Navicat ODBC驱动器管理器 未发现数据源名称并且未指定默认驱动程序 到安装目录下找到 sqlncli_x64.mis 双击安装 ...
- sqlalchemy union 联合查询
在最近的工作中遇到一个问题,要将两个字段相似的表里的数据统一起来展示在一个统计页面中.如果是单纯的展示数据那很简单,两个表查出来之后组合一下就完事了,但是有坑的地方就是分页和按照时间搜索,这两个功能决 ...
- DevEco中被忽略的实用功能
近期,我一直在业余时间研究纯血鸿蒙(HarmonyOS)App的开发,所使用的IDE是华为官方的DevEco Studio 3.1.1. 随着使用时间的增长,我发现了几个特别容易被忽略,但又特别实用的 ...
- 厄拉多塞筛法的 Python 实现以及复杂度计算
想要得到一个不大于N的数所有素数,可以先找到不超过根号N的所有素数,设2 = p1 < p2 < ......<pk ≤√N,然后在2,3,4......N里面进行下面的操作: 留下 ...
- 3.1 《数据库系统概论》SQL概述及数据定义（模式SCHEMA、表TABLE、索引INDEX）
前言 本篇文章学习书籍:<数据库系统概论>第5版 王珊 萨师煊编著 视频资源来自:数据库系统概论完整版(基础篇+高级篇+新技术篇) 由于 BitHachi 学长已经系统的整理过本书了,我在 ...
- 嵌入式软件工程师笔试面试指南-ARM体系与架构
哈喽,大家好.我终于回来了!19号刚提交完大论文,就被抓去出差了,折腾了整整一周,26号晚上,才回到学校.鸽了好久都没更新干货了.今天更新一篇关于Arm的笔试面试题目,文章内容已同步更新在github ...
- S3C2440移植uboot之支持DM9000
上一节S3C2440移植uboot之支持NANDFLASH操作移植了uboot 支持了NANDFLASH的操作,这一节修改uboot支持DM9000. 目录 通过Makefile把dm9000x编 ...
- Servlet系列：生命周期（init、 service、destroy）详解
Servlet的生命周期是由Web容器(如Tomcat)管理的,包括以下三个阶段: 加载和实例化:当Web应用程序启动时,Web容器会加载和实例化Servlet.加载和实例化过程可以在应用程序启动时自 ...
- LeetCode-Go：一个使用 Go 语言题解 LeetCode 的开源项目
在中国的 IT 环境里,大多数场景下,学习算法的目的在于通过笔试算法题. 但算法书林林总总,有时候乱花渐欲迷人眼. 杜甫有诗云:读书破万卷,下笔如有神.不管选择哪本书,只要深入学习,分层次,逐层进阶, ...