本文部分转自“极客学院”-》CSS常用操作-图片

我们要实现如下的效果：

比较规矩的图片瀑布流_CSS3

如果鼠标移动到某张图片了，要高亮显示这张图，并且如果移到了字的部分，字也不那么突出地显示背景颜色。这种图片布局方式相较于比较随意的瀑布流就小清新了许多，确实在应用中也常见。下面我们上代码：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
	*{
		margin: 0px;
		padding: 0px;
	}
	body{
		margin:10px auto;
		width:70%;
		height: auto;
	}
	div.p_w_picpath{
		width: auto;
		height: auto;
		float: left;
		border: 1px solid darkgray;
		text-align: center;
		margin:5px;
	}
	div.p_w_picpath:hover
	{
		background-color: yellow;
	}
	a:hover
	{
		cursor: hand;
	}
	img{
		margin:5px;
	}
	.text{
		margin-left: 20px;
		margin-right: 22px;
		font-size: 15px;
		margin-bottom: 5px;
	}
	.text:hover{
		cursor: hand;
		background-color: #FF8400;
	}
	</style>
</head>
<body>
	<div class="container">
		<div class="p_w_picpath">
		<a href="#" target="_self">
			<img src="imgs/1.jpg" alt="风景" width="150px" height="150px">
		</a>
		<div class="text">8月份的沈阳恒宝</div>
	</div>
	<div class="p_w_picpath">
		<a href="#" target="_self">
			<img src="imgs/2.jpg" alt="风景" width="150px" height="150px">
		</a>
		<div class="text">8月份的沈阳恒宝</div>
	</div>
	<div class="p_w_picpath">
		<a href="#" target="_self">
			<img src="imgs/3.jpg" alt="风景" width="150px" height="150px">
		</a>
		<div class="text">8月份的沈阳恒宝</div>
	</div>
	<div class="p_w_picpath">
		<a href="#" target="_self">
			<img src="imgs/4.jpg" alt="风景" width="150px" height="150px">
		</a>
		<div class="text">8月份的沈阳恒宝</div>
	</div>
	<div class="p_w_picpath">
		<a href="#" target="_self">
			<img src="imgs/5.jpg" alt="风景" width="150px" height="150px">
		</a>
		<div class="text">8月份的沈阳恒宝</div>
	</div>
	<div class="p_w_picpath">
		<a href="#" target="_self">
			<img src="imgs/2.jpg" alt="风景" width="150px" height="150px">
		</a>
		<div class="text">8月份的沈阳恒宝</div>
	</div>
	<div class="p_w_picpath">
		<a href="#" target="_self">
			<img src="imgs/6.jpg" alt="风景" width="150px" height="150px">
		</a>
		<div class="text">8月份的沈阳恒宝</div>
	</div>
	<div class="p_w_picpath">
		<a href="#" target="_self">
			<img src="imgs/4.jpg" alt="风景" width="150px" height="150px">
		</a>
		<div class="text">8月份的沈阳恒宝</div>
	</div>
	<div class="p_w_picpath">
		<a href="#" target="_self">
			<img src="imgs/1.jpg" alt="风景" width="150px" height="150px">
		</a>
		<div class="text">8月份的沈阳恒宝</div>
	</div>
	<div class="p_w_picpath">
		<a href="#" target="_self">
			<img src="imgs/7.jpg" alt="风景" width="150px" height="150px">
		</a>
		<div class="text">8月份的沈阳恒宝</div>
	</div>
	<div class="p_w_picpath">
		<a href="#" target="_self">
			<img src="imgs/3.jpg" alt="风景" width="150px" height="150px">
		</a>
		<div class="text">8月份的沈阳恒宝</div>
	</div>
	<div class="p_w_picpath">
		<a href="#" target="_self">
			<img src="imgs/5.jpg" alt="风景" width="150px" height="150px">
		</a>
		<div class="text">8月份的沈阳恒宝</div>
	</div>
	</div>
	
</body>
</html>

这个效果的实现思路是，先确定div块中包含一个可以链接的图片，然后设置每个图片的默认大小，让它们变得规范，通过观察预览效果，逐渐修饰margin和border的值，调至舒适效果。最后书写hover伪类实现鼠标移至该元素背景改变颜色。