Un código de toninrazafison

1,399 toninrazafison

Abrir en el editor Publica tu código

Recomendado

28 March 2025

Un código de mcdonge13

16 January 2026

Plantilla HTML para reproductor de juegos Flash Ruffle

10 December 2025

Demostración del juego Flappy Bird - HTML Canvas 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);
}