WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animando Hover
949
ledoc
Abrir no Editor
Publique Seu Código
Recomendado
23 March 2025
Botão Hover Glow
11 December 2024
Botão Hover
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) */
