css鼠标悬停图片高亮效果特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css鼠标悬停图片高亮效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css鼠标悬停图片高亮效果</title>
<link href="css/zzsc.css" type="text/css" rel="stylesheet" />
</head>
<body>

<div class="zzsc">
	<li class="zzsc01"><img src="images/zzsc01.jpg" width="667" height="332" /></li>
	<li class="zzsc02"><img src="images/zzsc02.jpg" width="333" height="165" /></li>
	<li class="zzsc03"><img src="images/zzsc03.jpg" width="165" height="165" /></li>
	<li class="zzsc04"><img src="images/zzsc04.jpg" width="165" height="165" /></li>
	<li class="zzsc05"><img src="images/zzsc05.jpg" width="332" height="165" /></li>
	<li class="zzsc06"><img src="images/zzsc06.jpg" width="332" height="332" /></li>
</div>
</body>
</html>

CSS代码(zzsc.css):

@charset "utf-8";*{margin:0;padding:0;list-style:none;}
img{border:0;cursor:pointer;}
.zzsc{width:1002px;height:500px;border:1px solid #ff0000;margin:10px auto;position:relative;overflow:hidden;}
.zzsc:hover li{background:#000;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;}
.zzsc:hover img{opacity:0.5;filter:alpha(opacity=50);-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;}
.zzsc li:hover img{opacity:1;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;}
.zzsc01{width:667px;height:332px;position:absolute;left:0;top:0;}
.zzsc02{width:333px;height:165px;position:absolute;left:0;bottom:0;}
.zzsc03{width:165px;height:165px;position:absolute;left:335px;bottom:0;}
.zzsc04{width:165px;height:165px;position:absolute;left:503px;bottom:0;}
.zzsc05{width:332px;height:165px;position:absolute;right:0;top:0;}
.zzsc06{width:332px;height:332px;position:absolute;right:0;bottom:0;}

附件:下载该文件资源,减少时间成本(增值服务)