Un code par toninrazafison

Ouvrir dans l'éditeur Publiez votre code

Recommandé

1 January 2025

Un code de BENE

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

Un code par toninrazafison

Recommandé

Un code par codex

Un code par chinoos

Un code de BENE

HTML

CSS

JS

Recommandé

Un code par codex

Un code par chinoos

Un code de BENE

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS