Image Overlay Hover Effect using Html CSS

				
					/* Overlapping cards styles */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html,
body {
    display: grid;
    height: 100%;
    place-items: center;
    background: #e8e8e8;
    font-family: 'Poppins', sans-serif;
}

.overlap-cards-container {
    position: relative;
    width: 340px;
    height: 220px;
    margin: 40px auto;
}

.overlap-card {
    position: absolute;
    width: 120px;
    height: 200px;
    top: 40px;
    left: 70px;
    border-radius: 16px;
    box-shadow: 0 4px 24px #0002;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.2s;
    z-index: 1;
}

.overlap-card.card1 {
    transform: translateX(-60px) rotate(-8deg);
    background: url(images/image1.jpg) center center / cover no-repeat;
}

.overlap-card.card2 {
    transform: translateX(0px) rotate(0deg);
    background: url(images/image2.jpg) center center / cover no-repeat;
}

.overlap-card.card3 {
    transform: translateX(60px) rotate(8deg);
    background: url(images/image3.jpg) center center / cover no-repeat;
}

.overlap-card:hover {
    z-index: 10;
    box-shadow: 0px 8px 32px #0003;
    transform: translateY(-10px) scale(1.05);
}