ग्लासमोर्फिज्म उत्पाद कार्ड

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

30 August 2024

<!DOCTYPE html>
<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>Andev Web</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="thumb">
            <ul>
                <li onmouseover="chnageImgSrc('https://i.postimg.cc/50hrmyq2/shoes1.png')"><img src="https://i.postimg.cc/50hrmyq2/shoes1.png" alt=""></li>
                <li onmouseover="chnageImgSrc('https://i.postimg.cc/hvV5Znpb/shoes2.png')"><img src="https://i.postimg.cc/hvV5Znpb/shoes2.png" alt=""></li>
                <li onmouseover="chnageImgSrc('https://i.postimg.cc/LXY7fLPW/shoes3.png')"><img src="https://i.postimg.cc/LXY7fLPW/shoes3.png" alt=""></li>
            </ul>
        </div>
        <div class="imgBox">
            <h2>Nike Air Zoom</h2>
            <img src="https://i.postimg.cc/50hrmyq2/shoes1.png" alt="" class="shoes">
            <ul class="sizes">
                <span>Size</span>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
            </ul>
            <a href="#" class="btn">Add To Cart</a>
        </div>
    </div>

CSS

@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;
}

ग्लासमोर्फिज्म उत्पाद कार्ड

अनुशंसित

3D कार्ड होवर प्रभाव

कार्ड लॉगिन

रिस्पॉन्सिव सीएसएस कार्ड

HTML

CSS

JS

अनुशंसित

3D कार्ड होवर प्रभाव

कार्ड लॉगिन

रिस्पॉन्सिव सीएसएस कार्ड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS