您的位置：首页 > Web前端 > CSS

css实现鼠标悬停图片放大显示

2017-08-16 11:47 344 查看

<!DOCTYPE html>

<html>



    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            * {

                margin: 0;

                padding: 0;

                font-family: "微软雅黑";

            }

            .avatar {

                display: block;

                width: 300px;

                margin: 0 auto;

                overflow: hidden;

            }



            .avatar img {

                display: block;

                border: 0;

                width: 100%;

                transform: scale(1);

                transition: all 1s ease 0s;

                -webkit-transform: scale(1);

                -webkit-transform: all 1s ease 0s;

            }



            .avatar:hover img {

                transform: scale(1.3);

                transition: all 1s ease 0s;

                -webkit-transform: scale(1.3);

                -webkit-transform: all 1s ease 0s;

            }

        </style>

    </head>



    <body>

        <a href="" class="avatar"><img src="img/aaa.jpg" /></a>

    </body>



</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航