web design icon
game design icon
game dev icon
ui-ux icon
app icon
blockchain icon
ar-vr icon
artificial intelligence icon
=======================================================================================================================
============================================================================== @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-size: 62.5%; font-family: "Poppins", sans-serif; } body { width: 100%; min-height: 100vh; background: #eee; display: grid; place-items: center; } .cardBox { width: 300px; height: 400px; position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 20px; box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 10px 0px, rgba(0, 0, 0, 0.5) 0px 2px 25px 0px; } .card { position: absolute; width: 95%; height: 95%; background: #000814; border-radius: 20px; z-index: 5; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; color: #ffffff; overflow: hidden; padding: 20px; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.5) 0px 18px 36px -18px inset; } .card h2, span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3rem; font-weight: 800; pointer-events: none; opacity: 0.5; } span { top: 75%; } .card .content h3 { font-size: 3rem; padding-bottom: 10px; } .card .content p { font-size: 1.6rem; line-height: 25px; } .card .content { transform: translateY(100%); opacity: 0; transition: 0.3s ease-in-out; } .card:hover .content { transform: translateY(0); opacity: 1; } .card:hover h2, .card:hover span { opacity: 0; } .cardBox::before { content: ""; position: absolute; width: 40%; height: 150%; background: #40E0D0; background: -webkit-linear-gradient(to right, #FF0080, #FF8C00, #40E0D0); background: linear-gradient(to right, #FF0080, #FF8C00, #40E0D0); animation: glowing01 5s linear infinite; transform-origin: center; animation: glowing 5s linear infinite; } @keyframes glowing { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

Animated Card

Hover Me

How's it goin Fam ?

This is Sachin Samal, your tech mate!!! I love you all. Lets make this world a better place for all of us. Keep prospering...Keep learning!!!

To Top
القائمة
تواصل معنا
الرئيسية
0 عربة التسوق