Magic Card Hover Animation Tutorial using Elementor

906SHARES

Global Color Style CSS

:root {
  --site-color: #45F882;
  --text-color: #0f1c23;
}

Border Style CSS

selector::after {
    content: "";
    display: block;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 93.846% 100%, 6.154% 100%, 0% 0%);
    clip-path: polygon(0% 0%, 100% 0%, 93.846% 100%, 6.154% 100%, 0% 0%);
    width: 65px;
    height: 5px;
    margin: 0px auto 0;
    background: var(--site-color);
}

All Effect CSS

selector .svg-icon svg{
    width: 100%;
    height: 100%;
}

selector .svg-icon{
    stroke: #2c2b2b !important;
    stroke-width: 1px!important;
    fill-rule: evenodd;
    stroke-dasharray: 2425, 2427;
  stroke-dashoffset: 2425;
  transition: stroke-dashoffset 3s ease, stroke 0s ease; 
}
selector:hover .svg-icon{
    stroke-dashoffset: 0!important;
    stroke: var(--site-color);
}
selector .bottom-text svg{
    width: 100%;
    height: 100%!important;
    transition: all 0.5s ease;
    
}
selector:hover .bottom-text svg{
    width: 100%!;
    height: 100%!important;
    fill: var(--site-color) !important;
}
selector:hover .bottom-text .elementor-heading-title{
    color: var(--text-color) !important;
}
selector:hover .svg-icon {
    stroke: var(--site-color) !important;
}
@media (max-width: 1024px){
selector .svg-icon-2{
    background: #0f1c23;
    min-height: 100%!important;
    border: 1px solid #2c2b2b;
    border-radius: 8px;
    
}
}
@media (max-width: 767px){
    selector .svg-icon-2{
    min-height: 100%!important;
    }
}

All Effect CSS Classes

svg-icon
svg-icon-2
bottom-text

Background Line CSS

selector{
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}