当前位置： 移动技术网 > IT编程>网页制作>CSS > 鼠标悬停图片放大效果代码教程

鼠标悬停图片放大效果代码教程

2019年06月02日  | 移动技术网IT编程  | 我要评论

珍惜 李宇春,倾倾百老会,上海seo顾问

鼠标悬停图片放大效果代码教程

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标悬停图片放大</title>
<style type="text/css">
         /*****鼠标悬停图片变大文字消失*****/
            .style1 ul li{float:left;margin:0 6px;position:relative;list-style:none}
            .style1 ul li{ -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;}
            .style1 ul li img{width: 170px;height: 120px;border-radius: 2px;}
            .style1 ul li span{background:rgba(0, 0, 0, 0.5);color:#fff;border-bottom-left-radius: 2px;border-bottom-right-radius: 2px;line-height: 23px;position:absolute;bottom: 3px;width: 170px;left:0;font-size:12px;-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s;}
            .style1 ul li:hover {-webkit-transform: scale(1.1); /*1.1放大值*/
                                  -moz-transform: scale(1.1); 
                                  -o-transform: scale(1.1);
                                  -ms-transform: scale(1.1); 
                                   /*  本hover用的是：transform属性；scale是属性下放大；*/


                                   }
            .style1 ul li:hover span{ opacity:0}

            /*****鼠标悬停文字消失*****/
</style>
</head>

<body>

<p class="style1">
    <h2>鼠标悬停整体放大</h2>
    <ul>
    <li><img src=https://www.2cto.com/uploadfile/2017/1120/20171120013955920.jpg"></li>
    <li><img src=https://www.2cto.com/uploadfile/2017/1120/20171120013955920.jpg"></li>
    <li><img src=https://www.2cto.com/uploadfile/2017/1120/20171120013955920.jpg"></li>
    <li><img src=https://www.2cto.com/uploadfile/2017/1120/20171120013955920.jpg"></li>
    <li><img src=https://www.2cto.com/uploadfile/2017/1120/20171120013955920.jpg"></li>
    <li><img src=https://www.2cto.com/uploadfile/2017/1120/20171120013955920.jpg"></li>

    </ul>
</p>


</body>
</html>

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网