<style type="text/css">
.one{
width: 250px;
height: 300px;
border: 1px solid gray;
border-radius: 8px;
margin-top: 110px;
position: relative;
float: left;
margin-left: 50px;
}
.one img{
width:250px ;
height: 270px;
/*float: left;*/
}
.one p{
margin: 0;
width: 250px;
height: 30px;
font-size: 18px;
background-color: white;
text-align: center;
}
.black_div{
width:250px ;
height: 270px;
/*background-color:black;*/
opacity: 0.8px;
position: absolute;
display: none;
}
h3{
position: absolute;
font-size: 30px;
color: white;
left: 70px;
top: 150px;
display: none;
}
.one:hover h3{
display: block;
}
.one:hover .black_div{
display: block;
}
</style>
<div class="one">
<h3>天猫商城</h3><div class="black_div"></div>
<img src="img/tianmao.jpg">
<p class="position"> 天猫双十一剁手节</p>
</div>