码迷,mamicode.com
首页 > Web开发 > 详细

CSS实现图片缩放特效

时间:2016-11-24 11:54:09      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:back   href   float   感恩   :hover   图片   png   cal   eve   

    今天是感恩节,祝大家感恩节快乐哦!最近天冷了,大家注意保暖哟。下面一起看看小颖写的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轴。如果第二个参数未提供,则默认取第一个参数的值 */
}

 

   

CSS实现图片缩放特效

标签:back   href   float   感恩   :hover   图片   png   cal   eve   

原文地址:http://www.cnblogs.com/yingzi1028/p/6096759.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!