WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animating Hover
820
ledoc
Open In Editor
Publish Your Code
Recommended
21 October 2024
Hover Fill Card
22 August 2024
Animated card with 3d hover effect
8 February 2025
button hover
HTML
Copy
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) */