Cards with CSS Animation Hover Effect - SCSS

style.scss

$moonlight: linear-gradient(to right, #2C5364, #203A43, #0F2027); 
$grey: #0d1113; 
$blue: #1779ff;
$red: #f84443;
$light: rgba(255,255,255,.05);

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    background: $grey;
    color: white;
    min-height: 100vh;
}
a{
    color: white;
}

.container{
    width: 1100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;

    .card{
        position: relative;
        width: 300px;
        height: 400px;
        background: $moonlight;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 20px 50px rgba(0,0,0,.2);
        overflow: hidden;
        opacity: .7;
        transition: 0.5s;

        &:hover{
            opacity: 1;
        }

        &:hover .content h2{
            opacity: 1;
            transform: translateY(-75px);
        }
        &:hover .content h3{
            opacity: 1;
        }

        &:hover span:nth-child(1), 
        &:hover span:nth-child(2), 
        &:hover span:nth-child(3), 
        &:hover span:nth-child(4){
            opacity: 1;
        }
        
        &:before{
            content: '';
            position: absolute;
            top: 2px;
            left: -50px;
            bottom: 2px;
            width: 60%;
            background: $light;
            pointer-events: none;
            transform: skew(10deg);
        }

        span:nth-child(1){
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(to right, transparent, #1779ff);
            animation: animate1 2s linear infinite;
            opacity: 0;
        }


        span:nth-child(2){
            position: absolute;
            top: 0;
            right: 0;
            width: 3px;
            height: 100%;
            background: linear-gradient(to bottom, transparent, #1779ff); 
            animation: animate2 2s linear infinite;
            animation-delay: 1s;
            opacity: 0;
        }

        span:nth-child(3){
            position: absolute;
            bottom: 0;
            left: 0;
            height: 3px;
            width: 100%;
            background: linear-gradient(to left, transparent, #1779ff); 
            animation: animate3 2s linear infinite;
            opacity: 0;
        }

        span:nth-child(4){
            position: absolute;
            bottom: 0;
            left: 0;
            width: 3px;
            height: 100%;
            background: linear-gradient(to top, transparent, #1779ff ); 
            animation: animate4 2s linear infinite;
            opacity: 0;
            animation-delay: 1s;
        }

        @keyframes animate1 {
            0%{
                transform: translateX(-100%);
            }
            100%{
                transform: translateX(100%);
            }
        }

        @keyframes animate2 {
            0%{
                transform: translateY(-100%);
            }
            100%{
                transform: translateY(100%);
            }
        }

        @keyframes animate3 {
            0%{
                transform: translateX(100%);
            }
            100%{
                transform: translateX(-100%);
            }
        }

        @keyframes animate4 {
            0%{
                transform: translateY(100%);
            }
            100%{
                transform: translateY(-100%);
            }
        }

        .content{
            padding: 30px;
            text-align: center;

            h2{
                position: absolute;
                right: 30px;
                font-size: 4rem;
                font-weight: 800;
                color: white;
                z-index: 1;
                opacity: 0.1;
                transition: 0.5s;                
            }
            h3{
                position: relative;
                font-size: 1.8rem;
                color: white;
                z-index: 2;
                opacity: .5;
                transition: 0.5s;
                letter-spacing: 0px;
                margin-bottom: 10px;
            }
            p{
                position: relative;
                font-weight: 300;
            }
            a{
                background: $grey;
                text-decoration: none;
                padding: 10px 20px;
                font-weight: 300;
                border-radius: 5px;
                font-size: 1rem;
                transition: 0.5s;
                cursor: pointer;
                position: relative;
                display: inline-block;
                margin-top: 20px;

                &:hover{
                    background: $blue;
                }
            }
        }
    }
}

@media (max-width: 768px) {  
    .card{
        margin: 20px 0;
    }
   
}/*END*/