鼠标悬停图片放大效果代码教程
程序员文章站
2022-06-27 14:46:29
鼠标悬停图片放大效果代码教程
鼠标悬停图片放大效果代码教程
<!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>
上一篇： 使用Nginx作缓存服务器以及删除其缓存文件的方法
下一篇： 明天换家饭店