WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animación de desplazamiento
1513
ledoc
Abrir en el editor
Publica tu código
Recomendado
16 July 2025
Formulario de inicio de sesión de Glassmorphic
29 August 2025
Administrador de tareas HTML: agregar, eliminar y completar tareas
21 January 2024
Código de Icono Social en 3D
HTML
Copy
<div id="grid"> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </div>
CSS
Copy
* { padding: 0; margin: 0; box-sizing: border-box; transition: 0.75s ease; } body { min-height: 100vh; display: grid; place-items: center; gap: 4rem; background: #b8860b; } #grid { width: calc(100% - 20vmin); aspect-ratio: 16 / 7; background: linen; display: grid; grid-template-columns: 1fr 0fr 1fr; place-items: center; outline: 2px solid #804a00; border-radius: 5vmin; box-shadow: 0 1rem 2rem -1rem rgba(68 50 4 / 1); overflow: hidden; } .left, .right, .middle { width: 100%; height: 100%; background-size: cover; background-position: center; transform-origin: center; } .left { background-image: url("https://assets.codepen.io/4787486/hamster-3.jpg"); border-right: 1px solid #804a00; } .middle { font-size: 0rem; background-image: url("https://assets.codepen.io/4787486/hamster-4.jpg"); } .right { background-image: url("https://assets.codepen.io/4787486/hamster-2.jpg"); border-left: 1px solid #804a00; } #grid:hover { grid-template-columns: 0fr 1fr 0fr; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
