/*Card design*/
.card {
    width: 250px;
    height: 350px;
    background: lightgray;
    box-shadow: 0 4px 35px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.card > .child {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: clip-path 0.6s;
    z-index: 1;
}

.card .card-1 {
    clip-path: polygon(0% 0%, 75% 0%, 0% 75%);
}

.card .card-1:hover {
    clip-path: polygon(0% 0%, 170% 0%, 0% 170%);
}

.card .card-1:has(~ .card-2:hover),
.card .card-1:has(~ .card-3:hover) {
    clip-path: polygon(0% 0%, 15% 0%, 0% 15%);
}

.card .card-2 {
    z-index: 0;
}

.card .card-3 {
    clip-path: polygon(25% 100%, 100% 25%, 100% 100%);
}

.card .card-3:hover {
    clip-path: polygon(-70% 100%, 100% -70%, 100% 100%);
}

.card .card-1:hover ~ .card-3,
.card .card-2:hover ~ .card-3 {
    clip-path: polygon(85% 100%, 100% 85%, 100% 100%);
}

/*Optional styles*/
.card {
    font: 30px Arial, Helvetica, sans-serif;
}

.card > .child {
    /*If using background image on card children*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.6s;
}

.card .card-1 {
    content:url(1.jpg);
    color: white;

}

.card .card-1:hover {

}

.card .card-2 {
    content:url(2.jpg);
}

.card .card-3 {
    content:url(3.jpg);
}

.card .card-3:hover {
}