.hover-blur {
position: relative;
z-index: 1;
overflow: visible;
} .hover-blur::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
width: 72%;
height: 30%;
background: #44E5FF50;
filter: blur(21px);
border-radius: 59px;
opacity: 0;
transition: opacity 0.3s ease-in-out;
z-index: -1;
} .hover-blur::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 2px;
width: 100%;
background: linear-gradient(to right, #FFFFFF00 0%, #44E5FF 55%, #FFFFFF00 100%);
opacity: 0;
transition: opacity 0.3s ease-in-out;
z-index: 0;
}
.hover-blur:hover::before,
.hover-blur:hover::after {
opacity: 1;
}