Un code par toninrazafison

1,614 toninrazafison

Ouvrir dans l'éditeur Publiez votre code

Recommandé

17 April 2026

Code HTML d'animation de cœur CSS

18 May 2025

Un code de BENE

15 August 2025

Code HTML pour tablette graphique avec Javascript

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