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

在现在的网页设计中,鼠标移到图片上图片放大的效果常常被用到,这个效果多应用于文章列表里。我一开始以为是用JQuery来实现的,后来才知道原来是用CSS3来实现的。虽然用JQuery也能实现同样的效果,但用CSS3来实现会更加简单和方便。本文将介绍如何用CSS3来实现这个功能。

效果1:鼠标移到图片上时,图片会自动放大。

<!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倍的意思。

效果2:图片放大不受限于DIV盒子

如果想图片放大后完全显示,而不是只显示DIV里的区域,那么我们只需把div的 overflow 属性去掉即可,不能设为auto ,否则div出现滚动条。

<!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>

文章来源:http://www.webkaka.com/tutorial/html/2017/072731/

推荐阅读

  1. Google Search Console移动设备易用性报错修复【已解决】
  2. 熊掌号中天级收录和周级收录的区别?
  3. 如何在没有插件的情况下为WordPress中的外部链接添加nofollow
  4. 在wordpress通过代码实现百度主动推送|手工提交|实时推送
  5. wordpress熊掌号站点天级收录链接提交代码【不用插件实现】
  6. 百度官方推出一款WordPress链接提交插件【baidu links submit】
  7. 什么是别名域(Aliasdomain)?
  8. 什么是子域(Subdomain)?

1人评论了“鼠标移到图片上图片放大【css3实例】”

发表评论

电子邮件地址不会被公开。 必填项已用*标注