WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Ein Code von toninrazafison
659
toninrazafison
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
13 June 2025
Ein Code von ashimadison8
1 January 2025
Ein Code von Codex
12 June 2025
Ein Code von Mete
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