CSS3鼠标悬停红色遮罩层翻转代码

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

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

以下是 CSS3鼠标悬停红色遮罩层翻转代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS3鼠标悬停红色遮罩层翻转代码</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="fonts/css/font-awesome.min.css">
</head>
<body>
<div class="box">
<h3>美女排行榜</h3>
<ul>
	<li>
		<img src="images/1.jpg" width="190" height="190" alt="">
		<div class="cover">
			<a href=""><i class="fa fa-plus"></i></a>
			<h4>Alice</h4>
			<p>来自美国洛杉矶</p>
		</div>
	</li>
	<li>
		<img src="images/1.jpg" width="190" height="190" alt="">
		<div class="cover">
			<a href=""><i class="fa fa-plus"></i></a>
			<h4>Alice</h4>
			<p>来自美国洛杉矶</p>
		</div>
	</li>
	<li>
		<img src="images/1.jpg" width="190" height="190" alt="">
		<div class="cover">
			<a href=""><i class="fa fa-plus"></i></a>
			<h4>Alice</h4>
			<p>来自美国洛杉矶</p>
		</div>
	</li>
	<li>
		<img src="images/1.jpg" width="190" height="190" alt="">
		<div class="cover">
			<a href=""><i class="fa fa-plus"></i></a>
			<h4>Alice</h4>
			<p>来自美国洛杉矶</p>
		</div>
	</li>
	<li>
		<img src="images/1.jpg" width="190" height="190" alt="">
		<div class="cover">
			<a href=""><i class="fa fa-plus"></i></a>
			<h4>Alice</h4>
			<p>来自美国洛杉矶</p>
		</div>
	</li>
	<li>
		<img src="images/1.jpg" width="190" height="190" alt="">
		<div class="cover">
			<a href=""><i class="fa fa-plus"></i></a>
			<h4>Alice</h4>
			<p>来自美国洛杉矶</p>
		</div>
	</li>
	<li>
		<img src="images/1.jpg" width="190" height="190" alt="">
		<div class="cover">
			<a href=""><i class="fa fa-plus"></i></a>
			<h4>Alice</h4>
			<p>来自美国洛杉矶</p>
		</div>
	</li>
	<li>
		<img src="images/1.jpg" width="190" height="190" alt="">
		<div class="cover">
			<a href=""><i class="fa fa-plus"></i></a>
			<h4>Alice</h4>
			<p>来自美国洛杉矶</p>
		</div>
	</li>
	<li>
		<img src="images/1.jpg" width="190" height="190" alt="">
		<div class="cover">
			<a href=""><i class="fa fa-plus"></i></a>
			<h4>Alice</h4>
			<p>来自美国洛杉矶</p>
		</div>
	</li>
	<li>
		<img src="images/1.jpg" width="190" height="190" alt="">
		<div class="cover">
			<a href=""><i class="fa fa-plus"></i></a>
			<h4>Alice</h4>
			<p>来自美国洛杉矶</p>
		</div>
	</li>
</ul>
</div>
</body>
</html>

CSS代码(style.css):

*{margin:0;padding:0;}
body{font-family:"Microsoft yahei",Arial;background:#eeeeee;}
.box{width:1150px;height:500px;margin:50px auto;}
.box h3{text-align:center;line-height:50px;}
.box ul li{float:left;width:190px;height:190px;background:#979797;border:solid 10px #979797;margin:0 20px 20px 0;list-style:none;position:relative;overflow:hidden;}
.box ul li .cover a{width:30px;height:30px;background:#ffffff;display:block;border-radius:50%;line-height:30px;margin:30px auto;}
.box ul li .cover a i{color:red;}
/* ���ֲ� */
.box ul li .cover{width:190px;height:190px;background:rgba(255,39,42,0.7);position:absolute;left:0;top:0;text-align:center;color:#ffffff;transform-origin:right bottom;/*��ת����λ��*/
-webkit-transform-origin:right bottom;-moz-transform-origin:right bottom;transform:rotate(90deg);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);transition:all 0.35s;-webkit-transition:all 0.35s;-moz-transition:all 0.35s;}
.box ul li .cover p{margin-top:10px;font-size:14px;}
.box ul li:hover .cover{transform:rotate(0deg);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);}

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