Custom ANIMATED Service Card Like a PRO | Elementor Tips & Tricks

[@thecreativarena]

Copy and Paste Code Below .card{ width: 320px; height: 180px; background: #333; transition: .5s; } .card:hover{ height: 450px; } .card .lines{ position: absolute; inset: 0; background: #000; overflow: hidden; } .card .lines::before{ content: ''; position: absolute; top: 50%; left: 50%; width: 600; height: 70%; background: linear-gradient(transparent, #5dff71, #5dff71, #5dff71, transparent) ; animation: animate 4s linear infinite; animation-play-state: paused; } .card:hover .lines::before{ animation-play-state: running; } @keyframes animate { 0%{ transform: translate(-50%,-50%) rotate(0deg); } 100%{ transform: translate(-50%,-50%) rotate(360deg); } } .card .lines::after{ content: ''; position: absolute; inset: 4px; background: #292929; } .card .imagebox{ position: absolute; top: -60px; left: 50%; width: 150px; height: 150px; transform: translateX(-50%); background: #000; transition: 0.5s; z-index: 10; overflow: hidden; justify-content: center; align-items: center; } .card:hover .imagebox{ top: 25px; width: 200px; height: 200px; } .card .imagebox::before{ content: ''; position: absolute; top: 50%; left: 50%; width: 500px; height: 150px; transform: translate(-50%, -50%); background: linear-gradient(transparent, #ff3c7b, #ff3c7b,#ff3c7b,transparent); animation: animate2 6s linear infinite; animation-play-state: paused; } .card:hover .imagebox::before{ animation-play-state: running; } @keyframes animate2 { 0%{ transform: translate(-50%,-50%) rotate(360deg); } 100%{ transform: translate(-50%,-50%) rotate(0deg); } } .card .imagebox::after{ content: ''; position: absolute; inset: 3px; background: #292929; } .card .imagebox .imgg{ position: absolute; width: 120px; z-index: 1; opacity: 0.5; transition: 0.5s; } .card:hover .imagebox .imgg{ opacity: 1; } .card .content{ position: absolute; width: 100%; height: 100%; overflow: hidden; } .card .content .details{ margin-top: 220px; padding: 50px 20px; text-align: center; width: 100%; transition: 0.5s; transform: translate(5px); } .card:hover .content .details{ transform: translate(0px); } .card .content .details p{ color: #fff; opacity: 0; transition: 0.5s; } .card:hover .content .details p{ opacity: 1; } .card .content .details a{ display: inline-block; padding: 8px 15px; background: #45f3ff; color: #292929; margin-top: 10px; font-weight: 500; text-decoration: none; opacity: 0; transition: 0.5s; } .card:hover .content .details a, .card:hover .content .details p{ opacity: 1; }

[@GodPleaseforgiveme]

wow, it so cool

[@GbengaSaviour]

❤❤❤❤❤

[@triciastdominic-my3ri]

This is beautiful