代码里面有解释：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片</title>
<style>
.clearfix:after{ /* 这里的after是将这个属性下面的子集标签的最后清除子集标签的浮动*/
content: ".";
display: block;
clear:both;
visibility: hidden; /*这里的visibility。就是不占空间的隐藏*/
height: 0;
}
.container{
background-color: red;
}
.container .item{
width: 180px;
height: 150px;
background-color: #303a40;
border: 1px solid red;
position: relative;
}
.left{
float: left;
}
.hide{
display: none;
}
.container .item:hover .text{
display: block;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="item left">
<div>
<img style="height: 150px;width: 180px;" src="girl.jpg">
</div>
<div class="hide text">
<div style="position: absolute;top: 0px;bottom: 0px;right: 0px;left: 0px;color: gold"">dasdas</div>
<div style="position: absolute;top: 0px;bottom: 0px;right: 0px;left: 0px;background-color: black;opacity: 0.6;"></div>
</div>
</div>
<div class="item left">
<div>
<img style="height: 150px;width: 180px;" src="girl.jpg">
</div>
<div class="hide text">
<div style="position: absolute;top: 0px;bottom: 0px;right: 0px;left: 0px;color: gold"">dasdas</div>
<div style="position: absolute;top: 0px;bottom: 0px;right: 0px;left: 0px;background-color: black;opacity: 0.6;"></div>
</div>
</div>
<div class="item left">
<div>
<img style="height: 150px;width: 180px;" src="girl.jpg">
</div>
<div class="hide text">
<div style="position: absolute;top: 0px;bottom: 0px;right: 0px;left: 0px;color: gold"">dasdas</div>
<div style="position: absolute;top: 0px;bottom: 0px;right: 0px;left: 0px;background-color: black;opacity: 0.6;"></div>
</div>
</div>
<div class="item left">
<div>
<img style="height: 150px;width: 180px;" src="girl.jpg">
</div>
<div class="hide text">
<div style="position: absolute;top: 0px;bottom: 0px;right: 0px;left: 0px;color: gold">dasdas</div>
<div style="position: absolute;top: 0px;bottom: 0px;right: 0px;left: 0px;background-color: black;opacity: 0.6;"></div>
</div>
</div>
</div>
</body>
</html>
