WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un code par ashimadison8
878
ashimadison8
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
13 October 2024
forme par
28 November 2024
Un code par robustbug269
10 June 2025
Un code par alejandrokundrah
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) */