02. Membuat CSS Avatar Card Pakai Elementor

Hello everyone!

Berbagi ilmu kembali, semoga ini bisa membawa manfaat untuk kalian semua yang sedang belajar ataupun mendalami Web Developer. Let's go!

Dukung EstehC.

CSS Code

				
					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);
}