码迷,mamicode.com
首页 > 其他好文 > 详细

图片放大后,右下角文字位置跟随一起变化

时间:2015-01-08 19:25:10      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .img{width:200px;height:130px;position: relative;}
            .img:hover{
                transform:scale(3);
                z-index:9999;
                -ms-transform: scale(3);    /* IE 9 */
                -webkit-transform: scale(3);    /* Safari 和 Chrome */
                -o-transform: scale(3);    /* Opera */
                -moz-transform: scale(3);    /* Firefox */
                }
            .num{position: absolute;right:0;bottom:0;}
        </style>
    </head>
    <body>
        <ul>
            <li class="img">
                <img src="1355060775.jpg"  />
                <a href="#" class="num">2张</a>
            </li>
        </ul>
    </body>
</html>

图片放大后,右下角文字位置跟随一起变化

标签:

原文地址:http://www.cnblogs.com/zhouyx/p/4211412.html

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