View CSS
View HTML
.overlay-cards-1 {
position: relative;
padding: 30px;
margin-bottom: 20px;
}
.card-bg-1 {
position: absolute;
background: #4a92ea;
transform: translate(-65px, 5px) rotateZ(45deg);
z-index: 1;
transition: all 1s ease;
transform-origin: center;
}
.card-content-1 {
position: relative;
z-index: 10;
background: #264e80;
transition: all .8s ease;
background: url('wp-content/uploads/2021/02/prespective-img.jpg') no-repeat;
background-size: cover;
box-shadow: 0 0 0 #154b8494;
}
.card-bg-1, .card-content-1 {
width: 250px;
height: 150px;
border-radius: 10px;
}
.overlay-cards-1:hover .card-bg-1 {
transform: translate(-90px, 0px) rotate(90deg);
}
.overlay-cards-1:hover .card-content-1 {
box-shadow: 0 13px 15px #154b8494;
}
<div class="overlay-cards-1">
<div class="card-bg-1"></div>
<div class="card-content-1"></div>
</div>