CSS3鼠标悬停效果

这是一个很简单的效果,简单的记录一下代码,先看效果图。

<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<style>
			.cbp-ig-grid {
				list-style: none;
				padding: 0 0 50px 0;
				margin: 0;
			}
			
			.cbp-ig-grid:after {
				clear: both;
			}
			
			.cbp-ig-grid li {
				width: 20%;
				float: left;
				height: 370px;
				text-align: center;
				border-top: 1px solid #ddd;
			}
			
			.cbp-ig-grid li>a {
				display: block;
				height: 100%;
				color: #ffffff;
				background: #000000;
				opacity: 0.7;
				text-decoration: none;
				-webkit-transition: background 0.2s;
				-moz-transition: background 0.2s;
				transition: background 0.2s;
			}
			
			.cbp-ig-grid .cbp-ig-img {
				margin: 20px 0 10px 0;
				padding: 20px 0 0 0;
				width: 80px;
				height: 80px;
				-webkit-transition: -webkit-transform 0.2s;
				-moz-transition: -moz-transform 0.2s;
				transition: transform 0.2s;
			}
			
			.cbp-ig-grid .cbp-ig-title {
				margin: 20px 0 10px 0;
				padding: 20px 0 0 0;
				-webkit-transition: -webkit-transform 0.2s;
				-moz-transition: -moz-transform 0.2s;
				transition: transform 0.2s;
			}
			
			.cbp-ig-grid .cbp-ig-category {
				text-transform: uppercase;
				display: inline-block;
				font-size: 1em;
				letter-spacing: 1px;
				color: #fff;
				-webkit-transform: translateY(10px);
				-moz-transform: -moz-translateY(10px);
				-ms-transform: -ms-translateY(10px);
				transform: translateY(10px);
				opacity: 0;
				-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
				-moz-transition: -moz-transform 0.3s, opacity 0.2s;
				-webkit-transition: transform 0.3s, opacity 0.2s;
			}
			
			.cbp-ig-grid li:hover .cbp-ig-category,
			.touch .cbp-ig-grid li .cbp-ig-category {
				opacity: 1;
				-webkit-transform: translateY(0px);
				-moz-transform: translateY(0px);
				-ms-transform: translateY(0px);
				transform: translateY(0px);
			}
			
			.cbp-ig-grid .cbp-ig-details {
				margin-top: 25px;
				padding: 5px;
				border: 1px solid #FFFFFF;
				display: inline-block;
				font-size: 1em;
				letter-spacing: 1px;
				color: #fff;
				-webkit-transform: translateY(10px);
				-moz-transform: -moz-translateY(10px);
				-ms-transform: -ms-translateY(10px);
				transform: translateY(10px);
				opacity: 0;
				-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
				-moz-transition: -moz-transform 0.3s, opacity 0.2s;
				-webkit-transition: transform 0.3s, opacity 0.2s;
			}
			
			.cbp-ig-grid li:hover .cbp-ig-details,
			.touch .cbp-ig-grid li .cbp-ig-details {
				opacity: 1;
				-webkit-transform: translateY(0px);
				-moz-transform: translateY(0px);
				-ms-transform: translateY(0px);
				transform: translateY(0px);
			}
			/* Hover styles */
			
			.cbp-ig-grid li>a:hover {
				background: #47a3da;
			}
			
			.cbp-ig-grid li>a:hover .cbp-ig-title {
				color: #fff;
			}
			
			.cbp-ig-grid li>a:hover .cbp-ig-title {
				-webkit-transform: translateY(-30px);
				-moz-transform: translateY(-30px);
				-ms-transform: translateY(-30px);
				transform: translateY(-30px);
			}
			
			.cbp-ig-grid li>a:hover .cbp-ig-img {
				-webkit-transform: translateY(-30px);
				-moz-transform: translateY(-30px);
				-ms-transform: translateY(-30px);
				transform: translateY(-30px);
			}
		</style>
	</head>

	<body>

		<div class="container">
			<div class="main">
				<ul class="cbp-ig-grid">
					<li style="background: url(https://img.alicdn.com/tps/TB16hkwLXXXXXX6XXXXXXXXXXXX-576-840.jpg) no-repeat">
						<a href="#">
							<span>
								<img class="cbp-ig-img" src="https://img.alicdn.com/tps/TB1fEPxLXXXXXa9XFXXXXXXXXXX-144-144.png" />
							</span>
							<h3 class="cbp-ig-title">学校定位解决方案</h3>
							<span class="cbp-ig-category">结合大数据能力帮助电商企业快速搭建平台、应对业务高并发,剖析秒杀、视频直播等场景</span>
							<span class="cbp-ig-details">查看详情</span>
						</a>
					</li>

					<li style="background:url(https://img.alicdn.com/tps/TB19Jz6LXXXXXacaXXXXXXXXXXX-576-840.jpg) no-repeat">
						<a href="#">
							<span>
								<img class="cbp-ig-img" src="https://img.alicdn.com/tps/TB1fEPxLXXXXXa9XFXXXXXXXXXX-144-144.png" />
							</span>
							<h3 class="cbp-ig-title">学校定位解决方案</h3>

							<span class="cbp-ig-category">结合大数据能力帮助电商企业快速搭建平台、应对业务高并发,剖析秒杀、视频直播等场景</span>
							<span class="cbp-ig-details">查看详情</span>
						</a>
					</li>

					<li style="background:url(https://img.alicdn.com/tps/TB1dDT4LXXXXXabaXXXXXXXXXXX-576-840.jpg) no-repeat">
						<a href="#">
							<span>
								<img class="cbp-ig-img" src="https://img.alicdn.com/tps/TB1fEPxLXXXXXa9XFXXXXXXXXXX-144-144.png" />
							</span>
							<h3 class="cbp-ig-title">学校定位解决方案</h3>
							<span class="cbp-ig-category">结合大数据能力帮助电商企业快速搭建平台、应对业务高并发,剖析秒杀、视频直播等场景</span>
							<span class="cbp-ig-details">查看详情</span>
						</a>
					</li>

					<li style="background:url(https://img.alicdn.com/tps/TB1PVwkLXXXXXagXFXXXXXXXXXX-576-840.jpg) no-repeat">
						<a href="#">
							<span>
								<img class="cbp-ig-img" src="https://img.alicdn.com/tps/TB1fEPxLXXXXXa9XFXXXXXXXXXX-144-144.png" />
							</span>
							<h3 class="cbp-ig-title">学校定位解决方案</h3>
							<span class="cbp-ig-category">结合大数据能力帮助电商企业快速搭建平台、应对业务高并发,剖析秒杀、视频直播等场景</span>
							<span class="cbp-ig-details">查看详情</span>
						</a>
					</li>

					<li style="background:url(https://img.alicdn.com/tps/TB1erQpLXXXXXa7XpXXXXXXXXXX-576-840.jpg) no-repeat">
						<a href="#">
							<span>
								<img class="cbp-ig-img" src="https://img.alicdn.com/tps/TB1fEPxLXXXXXa9XFXXXXXXXXXX-144-144.png" />
							</span>
							<h3 class="cbp-ig-title">学校定位解决方案</h3>
							<span class="cbp-ig-category">结合大数据能力帮助电商企业快速搭建平台、应对业务高并发,剖析秒杀、视频直播等场景</span>
							<span class="cbp-ig-details">查看详情</span>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</body>

</html>

原文作者:祈澈姑娘 关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源300G干货大全。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页