CSS鼠标带遮罩层的移入移出效果

CSS鼠标带遮罩层的移入移出效果

*{
	margin: 0 auto;
	padding: 0;
}
.div1{
	/* text-align: center; */
	margin-top: 300px;
	margin-left: 300px;
}
.div1{
	padding: 30px 10px;
	/* border: 1px solid black; */
	position: absolute;
	transition:0.5s;
	-moz-transition:0.5s; /* Firefox 4 */
	-webkit-transition:0.5s; /* Safari and Chrome */
	-o-transition:0.5s; /* Opera */
}

.div1:after{
	content: "";
	width: 105px;
	height: 0px;
	background-color: aquamarine;
	position: absolute;
	top: 0;
	left: 0;
	transition: all 0.5s ease 0s;
	z-index: -1;
}
.div1:hover:after{
	height: 100%;
	border-radius: 10px;
}
.div1:hover{
	transform: translateY(-10px) translateX(0px);
}

<div class="div1">
	<img src="./img/o1.png" >
</div>