टोनिनराज़ाफ़िसन द्वारा एक कोड

अनुशंसित

18 June 2025

रिस्पॉन्सिव एफएक्यू पेज

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Animation hover</title>
</head>
<body>
    <main>
        <ul class="list">
            <li class="item"><img src="https://i.pinimg.com/736x/7d/d2/18/7dd2182ea9e3b0dc51cfe3813a3df00b.jpg" alt=""></li>
            <li class="item"><img src="https://i.pinimg.com/736x/d0/be/2b/d0be2b9f67bdd67830ea096fa2449a3e.jpg" alt=""></li>
            <li class="item"><img src="https://i.pinimg.com/736x/ac/c0/53/acc0534550acfc08eedc21d25e47fa75.jpg" alt=""></li>
            <li class="item"><img src="https://i.pinimg.com/736x/34/13/1c/34131c4e5b9523db47833c81ffbfd8fe.jpg" alt=""></li>
            <li class="item"><img src="https://i.pinimg.com/736x/fe/a1/33/fea1337c3f84c6e787a5559110b6ccb1.jpg" alt=""></li>
            <li class="item"><img src="https://i.pinimg.com/736x/77/f0/37/77f037710ce0a7a1500a8fdd2664f043.jpg" alt=""></li>
            <li class="item"><img src="https://i.pinimg.com/736x/9f/7c/d9/9f7cd930e5c4183f595ff805f1863dbe.jpg" alt=""></li>
            <li class="item"><img src="https://i.pinimg.com/736x/d6/0c/55/d60c559a06b089e5566bc4bb6ceb7d1a.jpg" alt=""></li>
            <li class="item"><img src="https://i.pinimg.com/736x/78/5e/c1/785ec1e6b757fd171d026f277d1b2a30.jpg" alt=""></li>
            <li class="item"><img src="https://i.pinimg.com/736x/c1/07/7d/c1077d8577306390e5520434cb6c1f28.jpg" alt=""></li>
        </ul>
    </main>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

body {
    background-color: grey;
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    overflow: auto;
}

main {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    height: 500px;
}

.list{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    transform-style: preserve-3d;
    transform: perspective(1000px);
}

.list .item img {
    width: 100px;
    height: 200px;
}

.list .item{
    margin: 0 2px;
    cursor: pointer;
    filter: brightness(0);
    transition: .5s;
}

.list .item:hover {
    filter: brightness(1);
    transform: translateZ(200px);
}
.list .item:hover + * {
    filter: brightness(0.7);
    transform: translateZ(150px) rotateY(40deg);
}
.list .item:hover + * + * {
    filter: brightness(0.5);
    transform: translateZ(100px) rotateY(20deg);
}
.list .item:hover + * + * + * {
    filter: brightness(0.2);
    transform: translateZ(50px) rotateY(10deg);
}
.list .item:has(+ *:hover) {
    filter: brightness(0.7);
    transform: translateZ(150px) rotateY(-40deg);
}
.list .item:has(+ * + *:hover) {
    filter: brightness(0.5);
    transform: translateZ(100px) rotateY(-20deg);
}
.list .item:has(+ * + * + *:hover) {
    filter: brightness(0.2);
    transform: translateZ(50px) rotateY(-10deg);
}

टोनिनराज़ाफ़िसन द्वारा एक कोड

अनुशंसित

कोडेक्स द्वारा एक कोड

cleanbug411 द्वारा एक कोड

रिस्पॉन्सिव एफएक्यू पेज

HTML

CSS

JS

अनुशंसित

कोडेक्स द्वारा एक कोड

cleanbug411 द्वारा एक कोड

रिस्पॉन्सिव एफएक्यू पेज

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS