WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
ग्लासमोर्फिज्म उत्पाद कार्ड
2740
Andev.web
संपादक में खोलें
Video
अपना कोड प्रकाशित करें
13
अनुशंसित
30 August 2024
3D कार्ड होवर प्रभाव
9 July 2025
3D झुकाव और ऊर्जा रिंग प्रभाव के साथ मूल्य निर्धारण कार्ड
28 August 2024
लंबन गहराई कार्ड
HTML
Copy
Andev Web
Nike Air Zoom
Size
7
8
9
10
Add To Cart
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,900;1,900&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: url(https://images.unsplash.com/photo-1724204401190-d22d7ec087f1?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D); background-size: cover; background-attachment: fixed; } .container { position: relative; width: 400px; height: 400px; } .container .thumb { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; } .container .thumb li { list-style: none; width: 100px; height: 100px; /* background: #00f; */ margin: 10px 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.2); box-shadow: 0 15px 25px rgba(0, 0, 0, 0.05); border: 1px solid rgba(255, 255, 255, 0.25); border-top: 1px solid rgba(255, 255, 255, 0.5); border-left: 1px solid rgba(255, 255, 255, 0.5); border-radius: 25px; backdrop-filter: blur(4px); } .container .thumb li img { width: 80%; transition: 0.5s; } .container .thumb li:hover img { transform: rotate(-35deg); } .container .imgBox { position: absolute; top: 0; right: 0; width: 350px; height: 100%; /* background: #ff0; */ background: rgba(255, 255, 255, 0.2); box-shadow: 0 15px 25px rgba(0, 0, 0, 0.05); border: 1px solid rgba(255, 255, 255, 0.25); border-top: 1px solid rgba(255, 255, 255, 0.5); border-left: 1px solid rgba(255, 255, 255, 0.5); border-radius: 25px; backdrop-filter: blur(4px); padding: 60px 20px; padding-left: 50px; display: flex; align-items: center; flex-direction: column; justify-content: space-between; } .container .imgBox h2 { color: #fff; letter-spacing: 1; } .container .imgBox img { width: 80%; transition: 0.25s; } .container .imgBox .sizes { display: flex; justify-content: center; align-items: center; } .container .imgBox .sizes span { color: #fff; font-size: 1.2em; letter-spacing: 1px; margin-right: 5px; } .container .imgBox img:hover { transform: scale(1.5) rotate(-15deg) translateX(20px); } .container .imgBox .sizes li { list-style: none; width: 30px; height: 30px; background: #fff; color: #1e6b7b; display: flex; justify-content: center; align-items: center; margin: 5px; border-radius: 4px; font-weight: 700; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); cursor: pointer; transition: 0.25s; } .container .imgBox .sizes li:hover { transform: translateY(-10px); } .container .imgBox .btn { position: absolute; bottom: -30px; background: #fff; display: inline-block; text-decoration: none; padding: 15px 30px; border-radius: 30px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); font-weight: 500; color: #1e6b7b; transition: 0.25s; } .container .imgBox .btn:hover { letter-spacing: 2px; }
JS
Copy