蒙版图片和背景图法

 <!--img--> <div class="fa1">    <div class="fat2"> <img src="../img/index1.jpg" /></div>     <div class="meb"></div> </div> <!--background-img-->   <div class="div1">   <div class="div2">fs</div>   </div><br/>

/*图片法*/.meb{    width: 360px;    height: 480px;    outline: 1px solid grey;    background: rgba(0,0,0,.5);    position: absolute;    top: 0;    left: 0;

}.fa1{    position: relative;    cursor: pointer;

}

.meb{    transition: all 2s linear;}.meb:hover{    width: 360px ;    height: 0;}

.fat2 img{    transition: all 2s linear;}.fat2:hover img{    -webkit-transform: scale(2);}

.meb img{    transition: all 2s linear;}.meb:hover img{    -webkit-transform: scale(2);}

/*背景图法*/.div1{    background-image:url("../img/index1.jpg");    width: 360px;    height: 480px;    outline: 1px solid pink;}.div2{    width: 360px;    height: 480px;    background: rgba(0,0,0,.5);}.div2:hover{

    background-size: 600px 600px;}