Rotate Background Card

Rotate Background Card

Copy to clipboard
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>