H5图片浮动和Hover

<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>