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

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

16 May 2025

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

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

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

अनुशंसित

डी.ई.एम.ई. द्वारा एक कोड

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

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

HTML

CSS

JS

अनुशंसित

डी.ई.एम.ई. द्वारा एक कोड

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

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

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS