Folyékony fény

.we-hover-liquid {
    width: 100%;
    max-width: 440px;
    height: 190px;
    margin: 60px auto;

    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;

    padding: 40px;
    box-sizing: border-box;

    background: #090f12;

    border: 1px solid rgba(142,232,212,.22);
    border-radius: 20px;

    color: #f2f4f0;
    font-family: Arial, sans-serif;

    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        border-color .45s ease,
        box-shadow .45s ease;
}


/* FOLYÉKONY FÉNY */

.we-liquid-orb {
    position: absolute;

    left: var(--liquid-x, 50%);
    top: var(--liquid-y, 50%);

    width: 180px;
    height: 180px;

    transform: translate(-50%, -50%);

    background:
        radial-gradient(
            circle,
            rgba(142,232,212,.32) 0%,
            rgba(142,232,212,.16) 25%,
            rgba(142,232,212,.05) 48%,
            transparent 72%
        );

    filter: blur(8px);

    opacity: 0;

    transition:
        left .12s ease-out,
        top .12s ease-out,
        opacity .4s ease;

    pointer-events: none;
}


/* MÁSODLAGOS HULLÁM */

.we-hover-liquid::before {
    content: "";

    position: absolute;

    left: var(--liquid-x, 50%);
    top: var(--liquid-y, 50%);

    width: 30px;
    height: 30px;

    transform: translate(-50%, -50%);

    border: 1px solid rgba(142,232,212,.5);
    border-radius: 50%;

    opacity: 0;

    pointer-events: none;
}


/* FINOM ÜVEGES RÉTEG */

.we-hover-liquid::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at var(--liquid-x, 50%) var(--liquid-y, 50%),
            rgba(255,255,255,.045),
            transparent 32%
        );

    opacity: 0;

    transition: opacity .4s ease;

    pointer-events: none;
}


/* TARTALOM */

.we-liquid-content {
    position: relative;
    z-index: 2;

    transition:
        transform .45s cubic-bezier(.22,1,.36,1);
}

.we-liquid-content span {
    display: block;

    margin-bottom: 12px;

    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;

    color: #8ee8d4;
}

.we-liquid-content strong {
    display: block;

    font-size: 27px;
    font-weight: 500;
}

.we-liquid-content small {
    display: block;

    margin-top: 10px;

    font-size: 13px;
    color: rgba(242,244,240,.62);
}


/* HOVER */

.we-hover-liquid:hover {
    transform: translateY(-6px);

    border-color:
        rgba(142,232,212,.6);

    box-shadow:
        0 24px 55px rgba(0,0,0,.5),
        0 0 35px rgba(142,232,212,.10);
}

.we-hover-liquid:hover .we-liquid-orb {
    opacity: 1;
}

.we-hover-liquid:hover::after {
    opacity: 1;
}

.we-hover-liquid:hover::before {
    animation:
        liquidRipple
        .9s
        ease-out
        infinite;
}

.we-hover-liquid:hover .we-liquid-content {
    transform: translateZ(25px);
}


/* HULLÁM */

@keyframes liquidRipple {

    0% {
        width: 25px;
        height: 25px;
        opacity: .8;
    }

    100% {
        width: 190px;
        height: 190px;
        opacity: 0;
    }

}

const liquidCard = document.querySelector('.we-hover-liquid');

liquidCard.addEventListener('mousemove', function(e) {

    const rect = this.getBoundingClientRect();

    const x = ((e.clientX - rect.left) / rect.width) * 100;
    const y = ((e.clientY - rect.top) / rect.height) * 100;

    this.style.setProperty('--liquid-x', x + '%');
    this.style.setProperty('--liquid-y', y + '%');

});

liquidCard.addEventListener('mouseleave', function() {

    this.style.setProperty('--liquid-x', '50%');
    this.style.setProperty('--liquid-y', '50%');

});