~~~
<style>
.box{
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
background: palegreen;
}
.cover{
width: 0;
height: 0;
background: rgba(25,25,25,0.2);
position: absolute;
transition: all 1s;
transform: rotate(360deg);
transform-origin: 50% 50%;
}
.box:hover .cover{
width: 200px;
height: 200px;
transform: rotate(0deg);
}
</style>
~~~
~~~
<body>
<div class="box">
<div class="cover"></div>
</div>
</body>
~~~
