WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un codice di ashimadison8
256
ashimadison8
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
22 July 2025
sbircia nella funzione
31 January 2025
Film di carte CSS pure 3D
19 November 2024
codice recensione iphone 16
HTML
Copy
Nike Shoes
Size :
7
8
9
10
Color :
Buy Now
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); *{ font-family: 'Poppins', sans-serif; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #131313; } .container{ position: relative; } .container .card{ position: relative; width: 320px; height: 450px; background: #232323; border-radius: 20px; overflow: hidden; } .container .card:before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #9bdc28; clip-path: circle(150px at 80% 20%); transition: 0.5s ease-in-out; } .container .card:hover:before{ clip-path: circle(300px at 80% -20%); } .container .card:after{ content: 'Nike'; position: absolute; top: 30%; left: -20%; font-size: 12em; font-weight: 800; font-style: italic; color: rgba(255,255,25,0.05) } .container .card .imgBx{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 10000; width: 100%; height: 220px; transition: 0.5s; } .container .card:hover .imgBx{ top: 0%; transform: translateY(0%); } .container .card .imgBx img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-25deg); width: 270px; } .container .card .contentBx{ position: absolute; bottom: 0; width: 100%; height: 100px; text-align: center; transition: 1s; z-index: 10; } .container .card:hover .contentBx{ height: 210px; } .container .card .contentBx h2{ position: relative; font-weight: 600; letter-spacing: 1px; color: #fff; margin: 0; } .container .card .contentBx .size, .container .card .contentBx .color { display: flex; justify-content: center; align-items: center; padding: 8px 20px; transition: 0.5s;opacity: 0; visibility: hidden; padding-top: 0; padding-bottom: 0; } .container .card:hover .contentBx .size{ opacity: 1; visibility: visible; transition-delay: 0.5s; } .container .card:hover .contentBx .color{ opacity: 1; visibility: visible; transition-delay: 0.6s; } .container .card .contentBx .size h3, .container .card .contentBx .color h3{ color: #fff; font-weight: 300; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; margin-right: 10px; } .container .card .contentBx .size span{ width: 26px; height: 26px; text-align: center; line-height: 26px; font-size: 14px; display: inline-block; color: #111; background: #fff; margin: 0 5px; transition: 0.5s; color: #111; border-radius: 4px; cursor: pointer; } .container .card .contentBx .size span:hover{ background: #9bdc28; } .container .card .contentBx .color span{ width: 20px; height: 20px; background: #ff0; border-radius: 50%; margin: 0 5px; cursor: pointer; } .container .card .contentBx .color span:nth-child(2){ background: #9bdc28; } .container .card .contentBx .color span:nth-child(3){ background: #03a9f4; } .container .card .contentBx .color span:nth-child(4){ background: #e91e63; } .container .card .contentBx a{ display: inline-block; padding: 10px 20px; background: #fff; border-radius: 4px; margin-top: 10px; text-decoration: none; font-weight: 600; color: #111; opacity: 0; transform: translateY(50px); transition: 0.5s; margin-top: 0; } .container .card:hover .contentBx a{ opacity: 1; transform: translateY(0px); transition-delay: 0.75s; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */