今天是感恩节，祝大家感恩节快乐哦！最近天冷了，大家注意保暖哟。下面一起看看小颖写的demo吧。
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片缩放</title>
<link rel="stylesheet" href="css/master.css" media="screen">
</head>
<body>
<div class="image-body">
<div class="row-first">
<div class="img-first">
<img src="images/one.jpg" alt="狗狗" />
<div class="txt">
我是小可爱
</div>
</div>
<div class="img-second">
<img src="images/two.jpg" alt="狗狗" />
<div class="txt">
我是小可爱
</div>
</div>
<div class="img-third">
<img src="images/three.jpg" alt="狗狗" />
<div class="txt">
我是小可爱
</div>
</div>
</div>
<div class="row-second">
<div class="img-first">
<img src="images/four.jpg" alt="狗狗" />
<div class="txt">
我是小可爱
</div>
</div>
<div class="img-second">
<img src="images/five.jpg" alt="狗狗" />
<div class="txt">
我是小可爱
</div>
</div>
<div class="img-third">
<img src="images/six.jpg" alt="狗狗" />
<div class="txt">
我是小可爱
</div>
</div>
</div>
<div class="row-third">
<div class="img-first">
<img src="images/seven.jpg" alt="狗狗" />
<div class="txt">
我是小可爱
</div>
</div>
<div class="img-second">
<img src="images/eight.jpg" alt="狗狗" />
<div class="txt">
我是小可爱
</div>
</div>
<div class="img-third">
<img src="images/nine.jpg" alt="狗狗" />
<div class="txt">
我是小可爱
</div>
</div>
</div>
</div>
</body>
</html>
css代码：
.image-body {
padding-left: 157px;
}
.row-first, .row-second, .row-third {
overflow: hidden;
}
.img-first, .img-second, .img-third {
float: left;
height: 227px;
width: 260px;
}
.image-body img {
width: 200px;
height: 180px;
z-index: -1; /*z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。*/
}
.image-body .txt {
width: 175px;
height: 40px;
position: relative;
background: url(../images/bg_index_tag.png);
left: 20%;
top: -80px;
display: none;
z-index: 9999;
cursor: default; /*cursor 属性规定要显示的光标的类型（形状）。*/
padding: 10px 0px 0px 15px;
}
.img-first:hover .txt, .img-second:hover .txt, .img-third:hover .txt {
display: block;
}
.img-first:hover img, .img-second:hover img, .img-third:hover img {
transform: scale(1.5);
/*scale(<number>[, <number>])： 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值 */
}
时间： 2025-01-12 10:22:15