Styled Hero - Copy this React, Mui Component to your project
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animated Product Card | code_wars_official </title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="card"> <div class="circle" style="--clr:#f40103;"> <img src="cocacola_logo.png" alt="" class="logo"> </div> <div class="content"> <h2>cocacola</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel possimus cumque magnam consequatur illum blanditiis nihil.</p> <a href="#">Export more</a> </div> <img src="cocacola.png" alt="" class="product_img"> </div> </body> </html> @import url('https://fonts.googleapis.com/css2?family=Poppins:wgth@300;400;500;600;700;800,900&display=swap'); *{ font-family: 'Poppins',sans-serif; padding: 0; margin: 0; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #151F28; } .card{ position: relative; width: 350px; height: 350px; /* background: #333; */ border-radius: 20px; display: flex; justify-content: center; align-items: center; transition: 0.5s; } .card:hover{ width: 600px; transition-delay: 0.5s; } .card .circle{ position: absolute; width: 100%; height: 100%; border-radius: 20px; display: flex; justify-content: center; align-items: center; } .card .circle::before{ content: ''; position: absolute; top: 0; left: 0; width: 350px; height: 350px; border-radius: 50%; border: 8px solid var(--clr); background: #191919; transition: 0.5s, background 0.5s; transition-delay: 0.75s,1s; filter: drop-shadow(0 0 10px var(--clr)) drop-shadow(0 0 60px var(--clr)); } .card:hover .circle::before{ width: 100%; transition-delay: 0.5s; height: 100%; border-radius: 20px; background: var(--clr); } .card .circle .logo{ position: relative; width: 250px; transition: 0.5s; transition-delay: 0.5s; } .card:hover .circle .logo{ transform: scale(0); transition-delay: 0s; } .card .product_img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0) rotate(315deg); height: 300px; transition: 0.5s ease-in-out; } .card:hover .product_img{ transition-delay: 0.75s; transform: translate(-50%,-50%) scale(1) rotate(15deg); top: 45%; left: 75%; height: 500px; } .card .content{ position:absolute; width: 50%; left: 20%; padding: 20px 20px 20px 40px; opacity: 0; transition: 0.5s; visibility: hidden; } .card:hover .content{ transition-delay: 0.75s; opacity: 1; visibility: visible; left: 0; } .card .content h2{ color: #fff; text-transform: uppercase; font-size: 2.4em; line-height: 1em; } .card .content p{ color: #fff; } .card .content a{ position: relative; color: #111; background: #fff; padding: 10px 20px; border-radius: 10px; display: inline-block; text-decoration: none; font-weight: 600; margin-top: 10px; }
