WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
A Code by toninrazafison
655
toninrazafison
Open In Editor
Publish Your Code
Recommended
14 October 2024
Social Icons
16 February 2024
Infinite Tags Scroll
16 July 2023
HTML Social Icons
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