CSS例子 ＞ 鼠标悬停DIV卡片放大

HTML

<ul class="blocks">
  <li>
    第一个DIV
	<div class="popup">
		<span>
			<h3>一</h3>
			嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎
		</span>
	</div>
  </li>
  
    <li>
    第二个DIV
	<div class="popup">
		<span>
			<h3>二</h3>
			灌灌灌灌灌孤寡孤寡孤寡嘎嘎嘎
		</span>
	</div>
  </li>
  
</ul>

JS

.blocks{
	margin: 80px auto;
	max-width: 1070px;
	padding: 0;
}

/*  设置li样式,加上过渡动画 */
.blocks li{
	color: #fff;
	background-color: #2196E3;
	cursor: default;
	float: left;
	list-style: none;
	margin: 1%;
	padding: 60px 0;
	position: relative;
	text-align: center;
	-webkit-transition: .3s;
	transition: .3s;
	width: 31%;
	border-radius: 4px;
	font-weight: bold;
}

/*  设置放大层的样式,默认设置透明度为0,隐藏 */
.popup{
	background-color: inherit;
	color: #fff;
	height: 100%;
	width: 100%;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	padding: 15px;
	border-radius: 4px;
	-webkit-transition: .3s;
	transition: .3s;
	font-size: 12px;
	font-weight: normal;
}

.popup h3{
	font-size: 13px;
	margin: 0 0 5px;
	padding: 0;
}

/*  鼠标悬停移到最上层 */
.blocks li:hover{
	z-index: 3000;
}

/*  鼠标悬停在li时,放大1.4倍 */
.blocks li:hover .popup{
	opacity: 1;
	-webkit-transform: scale(1.4);
	-ms-transform: scale(1.4);
	transform:scale(1.4);
	box-shadow: 0 0 10px 2px rgba(0,0,0,.4);
}