WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un código de toninrazafison
658
toninrazafison
Abrir en el editor
Publica tu código
Recomendado
23 March 2023
Página de preguntas frecuentes responsiva
5 June 2025
Página de autenticación Iniciar sesión/Registrarse
28 August 2025
Atilla Demir: desarrollador web, diseñador y blog creativo
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