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轴。如果第二个参数未提供，则默认取第一个参数的值 */
}