WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un code par toninrazafison
657
toninrazafison
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
24 June 2025
Beril Coşkun: Blog, Culture, Littérature - Site Personnel
14 February 2025
Un code de Pedro_bugica
30 June 2025
Un code de Metr
HTML
Copy
Animation hover
CSS
Copy
* { 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); }
JS
Copy