前言
使用css3定位实现图片放大效果。
实现过程
1.步骤
定位实现图片放大效果的步骤:
1、上中下三部分,上部分为标题,中间为相框,底部为版权文字
2、相框使用图片,鼠标悬停时放大该图片。放大的图片为另一个图片(图片相同),使用定位的方式设置放大的图片样式。
3、底部版权文字,注意父容器的高度塌陷问题。
2.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.listBox{
width: 620px;
margin: 50px auto;
}
.listBox h3{
font-size: 17px;
color: #a53333;
text-align: center;
border-bottom: 2px #CCCCCC dashed;
font-weight: 300;
padding-bottom: 5px;
}
.pic img{
width: 100px;
height: 75px;
border: 1px #CCCCCC solid;
padding: 2px;
background: #FFFFF;
/* 图片默认向下撑大3px,换成块元素解决 */
display: block;
}
.pic{
border: 1px #bbbbbb solid;
padding: 5px;
width: 106px;
background: #EEEEEE;
float: left;
margin: 3px;
position: relative;
}
.list{
margin-top: 10px;
}
/* 放大的图片设置定位样式。 */
.pic img:nth-of-type(2){
/* 初始隐藏 */
display: none;
width: 200px;
height: 150px;
position: absolute;
top: -25px;
left: -25px;
/* 显示在上层 */
z-index: 88;
}
.pic:hover img:nth-of-type(2){
/* 鼠标悬停时放大图片 */
display: block;
border: 1px #000000 solid;
}
.listBox p{
text-align: center;
font-size: 17px;
color: #777;
margin-top: 10px;
}
/* 设置空元素添加浮动清理clear:both,来解决高度塌陷 */
.clear{
clear: both;
}
/*
解决高度塌陷的方式:
1、给父元素添加overflow:hidden;缺点:不适合和定位一起用
2、给所有浮动元素的后面添加一个空元素,并设置其浮动清理clear:both
*/
</style>
</head>
<body>
<div class="listBox">
<h3>HoverBox Image Gallery</h3>
<div class="list">
<div class="pic">
<img src="../img/bjj.jpg" />
<!-- 第二个为放大图片 -->
<img src="../img/bjj.jpg" />
</div>
<div class="pic">
<img src="../img/Seychelles_003.JPG" />
<img src="../img/Seychelles_003.JPG" />
</div>
<div class="pic">
<img src="../img/背景.jpg" />
<img src="../img/背景.jpg" />
</div>
<div class="pic">
<img src="../img/路飞.jpeg" />
<img src="../img/路飞.jpeg" />
</div>
<div class="pic">
<img src="../img/娜美.jpeg" />
<img src="../img/娜美.jpeg" />
</div>
<div class="pic">
<img src="../img/沙滩.jpg" />
<img src="../img/沙滩.jpg" />
</div>
<div class="pic">
<img src="../img/山治.jpg" />
<img src="../img/山治.jpg" />
</div>
<div class="pic">
<img src="../img/众人.jpeg" />
<img src="../img/众人.jpeg" />
</div>
<div class="pic">
<img src="../img/th.jpg" />
<img src="../img/th.jpg" />
</div>
<div class="pic">
<img src="../img/th%20(1).jpg" />
<img src="../img/th%20(1).jpg" />
</div>
<div class="pic">
<img src="../img/th%20(2).jpg" />
<img src="../img/th%20(2).jpg" />
</div>
<div class="pic">
<img src="../img/th%20(3).jpg" />
<img src="../img/th%20(3).jpg" />
</div>
<div class="pic">
<img src="../img/seychelles-voyage-decouverte.jpg" />
<img src="../img/seychelles-voyage-decouverte.jpg" />
</div>
<div class="pic">
<img src="../img/hhh.jpg" />
<img src="../img/hhh.jpg" />
</div>
<div class="pic">
<img src="../img/AP78907278_Seychelles_Trave-xlarge.jpg" />
<img src="../img/AP78907278_Seychelles_Trave-xlarge.jpg" />
</div>
<div class="pic">
<img src="../img/Anse-Source-dArgent.jpg" />
<img src="../img/Anse-Source-dArgent.jpg" />
</div>
<div class="pic">
<img src="../img/timg.jfif" />
<img src="../img/timg.jfif" />
</div>
</div>
<div class="clear"></div>
<p>2021年@版权所有</p>
</div>
</body>
</html>