转自 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实现鼠标移到图片上图片放大的更多相关文章

  1. CSS3实现鼠标移动到图片上图片变大

    CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义 <!DOCTYPE html><html> <head&g ...

  2. WPF中当鼠标移到按钮上时，按钮的背景图片消失的问题

    如果给按钮设置了背景图片,当鼠标移到按钮上的时候,按钮就好变成一个浅蓝色的按钮,背景图片就消失了,对于这个问题有很多解决方法,我只分享一下我的解决方法. 我第一次用的方式是在按钮中添加一个图片,不用背 ...

  3. CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）

    转载自:http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能. ...

  4. 用css3实现鼠标移进去当前亮其他变灰

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  5. JS事件 鼠标经过事件（onmouseover）鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。

    鼠标经过事件(onmouseover) 鼠标经过事件,当鼠标移到一个对象上时,该对象就触发onmouseover事件,并执行onmouseover事件调用的程序. 现实鼠标经过"确定&quo ...

  6. 鼠标移到图片上图片放大【css3实例】

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. 利用CSS3实现鼠标悬停在图片上图片缓慢缩放的两种方法

    1.改变background-size属性 将图片作为某个html元素的背景图片,用transition属性改变图片的大小. .container{ background-size: 100% 100 ...

  8. jQuery实现鼠标移到元素上动态提示消息框效果

    当光标移动到某些元素上时,会弹出像tips的提示框,这种效果想必大家都有见到过吧,下面有个不错的示例,大家可以感受下 当光标移动到某些元素上时,会弹出像tips的提示框. 复制代码代码如下: < ...

  9. 商品鼠标移过去hover效果---图片放大1.1倍

    .home-standard-layout .middle-goods-list ul li:hover{ box-shadow: 0 0 10px gray;} .home-standard-lay ...

  10. jQuery实现鼠标放到图片上，放大图片

    <script src="../../Script/jquery-1.7.2.js" type="text/javascript"></scr ...

随机推荐

  1. 高性能 Jsonpath 框架，Snack3 3.2.54 发布（支持 kotlin data 类反序化）

    Snack3,一个高性能的 JsonPath 框架 借鉴了 Javascript 所有变量由 var 申明,及 Xml dom 一切都是 Node 的设计.其下一切数据都以ONode表示,ONode也 ...

  2. AI绘画，Midjourney极简入门

    前几天看报道说: 一位小哥用AI绘画工具Midjourney生成的作品,在美国科罗拉多州博览会的艺术比赛中获得了第一名. 作者表示,他多次调整了输入的提示词,生成了100多幅画作,经过数周的修改和挑选 ...

  3. django中间件需要了解的方法 importlib模块 csrf校验策略 csrf相关装饰器

    目录 django中间件三个需要了解的方法 process_view process_exception process_template_response 基于django中间件实现功能的插拔式设计 ...

  4. Codeforce：1300B. Assigning to Classes （math）

    解题思路 题目说的意思是,给一个2n个数的数组,注意n为奇数,将这个数组平均分为2份,假设为c1和c2. c1和c2是奇数个元素的数组,比如数组[1,2,3],那么中位数就是2. 那么如何求得中位数差 ...

  5. CodeForces -337A：Puzzles（水）

    The end of the school year is near and Ms. Manana, the teacher, will soon have to say goodbye to a y ...

  6. POJ 1011 Sticks​ （DFS + 剪枝）

    题目地址:http://poj.org/problem?id=1011 题目大意 给出n个小木棒,组合成若干长度最短棍子 解题思路 首先将木棒从大到小排序 dfs(k, l), k是还剩多少木棒没用, ...

  7. 【调试】ftrace(二)新增跟踪点

    内核的各个子系统已经有大量的跟踪点,如果这些跟踪点无法满足工作中的需求,可以自己手动添加跟踪点. 添加跟踪点有两种方式,一种是仿照events/目录下的跟踪点,使用TRACE_EVENT() 宏添加. ...

  8. KVM 核心功能：内存虚拟化

    1 内存虚拟化简介 QEMU-KVM 提供内存的虚拟化,从虚拟机角度看其自身拥有的内存就是真实的物理内存.实际上,虚拟机是 host 上的一个 qemu 进程,在为虚拟机指定内存时,host 上并没有 ...

  9. python3查看文件是否存在，以及读、写与执行的属性

    技术背景 在使用python对系统文件进行操作的项目中,经常需要用到对本地文件的存在和读写进行判断的操作.最常用的比如os.exists函数,可以很方便的判断给定的文件名是否存在于系统中.但是这里我们 ...

  10. [python]使用标准库logging实现多进程安全的日志模块

    前言 原本应用的日志是全部输出到os的stdout,也就是控制台输出.因其它团队要求也要保留日志文件,便于他们用其他工具统一采集,另一方面还要保留控制台输出,便于出问题的时候自己直接看pod日志.具体 ...