WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un codice di toninrazafison
656
toninrazafison
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
12 April 2025
Un codice di fadlanbryan22
10 December 2024
Un codice di hunganh
6 April 2025
Fantastico editor Javascript
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