Kart 2

.box2 {
position: relative;
width: 220px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
z-index: 1;
}

.box2::before {
content: ' ';
position: absolute;
top: 0;
left: 50px;
width: 50%;
height: 100%;
text-decoration: none;
background: #fff;
border-radius: 8px;
transform: skewX(15deg);
transition: 0.5s;
}

.box2::after {
content: '';
position: absolute;
top: 0;
left: 50;
width: 50%;
height: 100%;
background: #fff;
border-radius: 8px;
transform: skewX(15deg);
transition: 0.5s;
filter: blur(30px);
}

.box2:hover:before,
.box2:hover:after {
transform: skewX(0deg) scaleX(1.3);
}

.box2:before,
.box2:after {
background: linear-gradient(315deg, #ffbc00, #ff0058)
}

.box2 span {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 5;
pointer-events: none;
}

.box2 span::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
opacity: 0;
transition: 0.1s;
animation: animate 2s ease-in-out infinite;
box-shadow: 0 5px 15px rgba(0,0,0,0.08)
}

.box2 span::before {
top: -40px;
left: 40px;
width: 50px;
height: 50px;
opacity: 1;
}

.box2 span::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
opacity: 0;
transition: 0.5s;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
animation-delay: -1s;
}

.box2 span:after {
bottom: -40px;
right: 40px;
width: 50px;
height: 50px;
opacity: 1;
}

.box2 .content2 {
position: relative;
width: 190px;
height: 254px;
padding: 20px 40px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
border-radius: 8px;
z-index: 1;
transform: 0.5s;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}

.box2 .content2 h2 {
font-size: 20px;
color: #fff;
margin-bottom: 10px;
}