~~~
<style>
*{
margin: 0;
padding: 0;
}
.box{
height: 200px;
width: 200px;
position: relative;
overflow: hidden;/*隱藏*/
}
.bg-img{
height: 200px;
width: 200px;
background: pink;
background-size: cover;
}
.cover{
width:200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
background: rgba(25, 25, 25, 0.2);
transform: rotate(90deg);
transition:all 0.85s;
transform-origin: left bottom;
}
.box:hover .cover{
transform: rotate(0deg);
}
</style>
~~~
~~~
<body>
<div class="box">
<div class="bg-img">
</div>
<div class="cover"></div>
</div>
</body>
~~~
