Si-Fi Card Hover Animation Effect Html Css
Introduction:
Welcome to an immersive coding experience that will take your web development skills to new heights! In this mesmerizing tutorial, we bring you a cutting-edge Sci-Fi Card Hover Animation Effect using HTML and CSS. 🚀✨
🎥 Watch as we dive deep into the world of futuristic web design, where creativity meets coding expertise. Witness the magic unfold as our skilled developer's hands craft lines of code that bring sci-fi dreams to life on your screen. With no talking, you can focus purely on the captivating animation and the step-by-step implementation.
VIDEO
Key Highlights:
🔷 Seamless HTML and CSS Integration: Learn the secrets behind integrating intricate animations into your web projects without breaking a sweat.
🔷 Hover Interaction: Discover the power of CSS hover effects to create interactive and engaging user experiences.
🔷 Sci-Fi Aesthetics: Dive into the realm of sci-fi aesthetics and bring a touch of futuristic elegance to your websites.
🔷 No Talking, All Action: Concentrate without distractions as we guide you through each code snippet and transformation in silence.
Whether you're a seasoned coder or just beginning your coding journey, this tutorial offers something for everyone. Elevate your skill set, enhance your portfolio, and be at the forefront of web design innovation. Don't miss out on this opportunity to learn, create, and inspire.
🚨 Remember to like, subscribe, and hit the notification bell to stay updated on our latest coding tutorials that empower you to create remarkable web experiences. Share this video with fellow coders and enthusiasts who seek to push the boundaries of web development.
Get ready to embark on a journey of coding excellence. Let's make the web more captivating, one animation at a time! 🌐👾
Html Code:
<!DOCTYPE html >
<html lang ="en" >
<head >
<meta charset ="UTF-8" >
<meta name ="viewport" content ="width=device-width,
initial-scale=1.0" >
<title >Si-Fi Card hover</title >
<link rel ="stylesheet" href ="style.css" >
</head >
<body >
<div class ="card" >
<div class ="boxshadow" ></div >
<div class ="main" >
<div class ="top" ></div >
<div class ="left side" ></div >
<div class ="right side" ></div >
<div class ="title" >TITLE</div >
<div class ="button-container" >
<button class ="button" ><svg class ="svg" xmlns ="http://www.w3.org/2000/svg" width ="24"
height ="24"
viewBox ="0 0 24 24" stroke ="red" fill ="none" stroke-width ="2" stroke-linecap ="round"
stroke-linejoin ="round" >
<rect width ="20" height ="20" x ="2" y ="2" rx ="5" ry ="5" ></rect >
<path d ="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" ></path >
<line x1 ="17.5" x2 ="17.51" y1 ="6.5" y2 ="6.5" ></line >
</svg >
</button >
<button class ="button" ><svg class ="svg twitter" xmlns ="http://www.w3.org/2000/svg" height ="24"
width ="24" fill ="red" viewBox ="0 0 512 512" >
<path
d ="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7
275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" >
</path >
</svg >
</button >
<button class ="button" ><svg class ="svg" xmlns ="http://www.w3.org/2000/svg" width ="24" height ="24"
viewBox ="0 0 24 24" fill ="none" stroke ="red" stroke-width ="2" stroke-linecap ="round"
stroke-linejoin ="round" >
<path
d ="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35
0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3
5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" >
</path >
<path d ="M9 18c-4.51 2-5-2-7-2" ></path >
</svg >
</button >
</div >
</div >
</div >
<div class ="card" >
<div class ="boxshadow" ></div >
<div class ="main" >
<div class ="top" ></div >
<div class ="left side" ></div >
<div class ="right side" ></div >
<div class ="title" >TITLE</div >
<div class ="button-container" >
<button class ="button" ><svg class ="svg" xmlns ="http://www.w3.org/2000/svg" width ="24"
height ="24"
viewBox ="0 0 24 24" stroke ="red" fill ="none" stroke-width ="2" stroke-linecap ="round"
stroke-linejoin ="round" >
<rect width ="20" height ="20" x ="2" y ="2" rx ="5" ry ="5" ></rect >
<path d ="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" ></path >
<line x1 ="17.5" x2 ="17.51" y1 ="6.5" y2 ="6.5" ></line >
</svg >
</button >
<button class ="button" ><svg class ="svg twitter" xmlns ="http://www.w3.org/2000/svg" height ="24"
width ="24" fill ="red" viewBox ="0 0 512 512" >
<path
d ="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7
275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" >
</path >
</svg >
</button >
<button class ="button" ><svg class ="svg" xmlns ="http://www.w3.org/2000/svg" width ="24"
height ="24"
viewBox ="0 0 24 24" fill ="none" stroke ="red" stroke-width ="2" stroke-linecap ="round"
stroke-linejoin ="round" >
<path
d ="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35
0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5
3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" >
</path >
<path d ="M9 18c-4.51 2-5-2-7-2" ></path >
</svg >
</button >
</div >
</div >
</div >
<div class ="card" >
<div class ="boxshadow" ></div >
<div class ="main" >
<div class ="top" ></div >
<div class ="left side" ></div >
<div class ="right side" ></div >
<div class ="title" >TITLE</div >
<div class ="button-container" >
<button class ="button" ><svg class ="svg" xmlns ="http://www.w3.org/2000/svg" width ="24"
height ="24"
viewBox ="0 0 24 24" stroke ="red" fill ="none" stroke-width ="2" stroke-linecap ="round"
stroke-linejoin ="round" >
<rect width ="20" height ="20" x ="2" y ="2" rx ="5" ry ="5" ></rect >
<path d ="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" ></path >
<line x1 ="17.5" x2 ="17.51" y1 ="6.5" y2 ="6.5" ></line >
</svg >
</button >
<button class ="button" ><svg class ="svg twitter" xmlns ="http://www.w3.org/2000/svg" height ="24"
width ="24" fill ="red" viewBox ="0 0 512 512" >
<path
d ="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7
275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" >
</path >
</svg >
</button >
<button class ="button" ><svg class ="svg" xmlns ="http://www.w3.org/2000/svg" width ="24"
height ="24"
viewBox ="0 0 24 24" fill ="none" stroke ="red" stroke-width ="2" stroke-linecap ="round"
stroke-linejoin ="round" >
<path
d ="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35
0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0
3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" >
</path >
<path d ="M9 18c-4.51 2-5-2-7-2" ></path >
</svg >
</button >
</div >
</div >
</div >
<div class ="card" >
<div class ="boxshadow" ></div >
<div class ="main" >
<div class ="top" ></div >
<div class ="left side" ></div >
<div class ="right side" ></div >
<div class ="title" >TITLE</div >
<div class ="button-container" >
<button class ="button" ><svg class ="svg" xmlns ="http://www.w3.org/2000/svg" width ="24"
height ="24"
viewBox ="0 0 24 24" stroke ="red" fill ="none" stroke-width ="2" stroke-linecap ="round"
stroke-linejoin ="round" >
<rect width ="20" height ="20" x ="2" y ="2" rx ="5" ry ="5" ></rect >
<path d ="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" ></path >
<line x1 ="17.5" x2 ="17.51" y1 ="6.5" y2 ="6.5" ></line >
</svg >
</button >
<button class ="button" ><svg class ="svg twitter" xmlns ="http://www.w3.org/2000/svg" height ="24"
width ="24" fill ="red" viewBox ="0 0 512 512" >
<path
d ="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7
275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" >
</path >
</svg >
</button >
<button class ="button" ><svg class ="svg" xmlns ="http://www.w3.org/2000/svg" width ="24"
height ="24"
viewBox ="0 0 24 24" fill ="none" stroke ="red" stroke-width ="2" stroke-linecap ="round"
stroke-linejoin ="round" >
<path
d ="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35
0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5
3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" >
</path >
<path d ="M9 18c-4.51 2-5-2-7-2" ></path >
</svg >
</button >
</div >
</div >
</div >
</body >
<script src ="script.js" ></script >
</html >
Css Code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #212121;
min-height: 100dvh;
width: 100%;
display: flex;
gap: 50px;
flex-wrap: wrap;
padding: 30px;
justify-content: center;
align-items: center;
}
.card {
position: relative;
height: 300px;
width: 230px;
}
.card:nth-child(2) {
filter: hue-rotate(300deg) brightness(1.3);
}
.card:nth-child(3) {
filter: hue-rotate(200deg) brightness(1.5);
}
.card:nth-child(4) {
filter: hue-rotate(60deg) brightness(3);
}
.card .boxshadow {
position: absolute;
height: 100%;
width: 100%;
border: 1px solid red;
transform: scale(0.8);
box-shadow: red 0px 30px 70px 0px;
transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.card .main {
width: 230px;
height: 300px;
overflow: hidden;
background: red;
background: linear-gradient(0deg, #3e0000 0%, red 60%, #3e0000 100%);
position: relative;
clip-path: polygon(0 0, 100% 0, 100% 40px, 100% calc(100% - 40px), calc(100% - 40px) 100%, 40px 100%, 0 calc(100% - 40px));
box-shadow: red 0px 7px 29px 0px;
transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.card .main .top {
position: absolute;
top: 0px;
left: 0;
width: 0px;
height: 0px;
z-index: 2;
border-top: 115px solid black;
border-left: 115px solid transparent;
border-right: 115px solid transparent;
transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.card .main .side {
position: absolute;
width: 100%;
top: 0;
transform: translateX(-50%);
height: 101%;
background: black;
clip-path: polygon(0% 0%, 50% 0, 95% 45%, 100% 100%, 0% 100%);
transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1s;
}
.card .main .left {
left: 0;
}
.card .main .right {
right: 0;
transform: translateX(50%) scale(-1, 1);
}
.card .main .title {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 90px;
font-weight: bold;
font-size: 25px;
opacity: 0;
z-index: -1;
transition: all 0.2s ease-out 0s;
}
.card .main .button-container {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.card .main .button-container .button {
position: absolute;
transform: translateX(-50%);
padding: 5px 10px;
clip-path: polygon(0 0, 100% 0, 81% 100%, 21% 100%);
background: black;
border: none;
color: white;
display: grid;
place-content: center;
transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.card .main .button-container .button .svg {
width: 15px;
transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.card .main .button-container .button:nth-child(1) {
bottom: 300px;
transition-delay: 0.4s;
}
.card .main .button-container .button:nth-child(2) {
bottom: 300px;
transition-delay: 0.6s;
}
.card .main .button-container .button:nth-child(3) {
bottom: 300px;
transition-delay: 0.8s;
}
.card .main .button-container .button:hover .svg {
transform: scale(1.2);
}
.card .main .button-container .button:active .svg {
transform: scale(0.7);
}
.card:hover .main {
transform: scale(1.1);
}
.card:hover .main .top {
top: -50px;
}
.card:hover .main .left {
left: -50px;
transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.1s;
}
.card:hover .main .right {
right: -50px;
transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.1s;
}
.card:hover .main .title {
opacity: 1;
transition: all 0.2s ease-out 1.3s;
}
.card:hover .main .button-container .button:nth-child(1) {
bottom: 80px;
transition-delay: 0.8s;
}
.card:hover .main .button-container .button:nth-child(2) {
bottom: 40px;
transition-delay: 0.6s;
}
.card:hover .main .button-container .button:nth-child(3) {
bottom: 0;
transition-delay: 0.4s;
}
.png)
