Elementor Player Card Hover Effect | Elementor Pro Tutorial

selector{
    --border-color: rgba(255,255,255,0.5);
    --border-size: 10px;
}

selector{
    width: 90%;
    height: 90%;
    position: absolute;
    top: 5%;
    left: 5%;
}
selector:after, selector:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    transition: all .5s ease-in-out 0s;
}
selector:before{
    border-bottom: var(--border-size) double var(--border-color);
    border-top: var(--border-size) double var(--border-color);
    transform: scale(0, 1);
    transform-origin: 0 0 0;
}
selector:after{
    border-left: var(--border-size) double var(--border-color);
    border-right: var(--border-size) double var(--border-color);
    transform: scale(0, 1);
    transform-origin: 100% 0 0;
}
selector:hover:before, selector:hover:after{
    opacity: 1;
    transform: scale(1);
    transition-delay: .15s;
}
selector h2{
    opacity: 0;
    transform: translate3d(0, -50px, 0);
    transition: 1s ease 0s;
}
selector:hover h2{
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
selector h6{
    opacity: 0;
    transform: translate3d(0, 50px, 0);
    transition: 1s ease 0s;
}
selector:hover h6{
    opacity: 1;
    transform: translate3d(0, 0, 0);
}