WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
एनिमेटिंग होवर
1520
ledoc
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
18 August 2024
होवर और धुंधला प्रभाव वाली साइटों की गैलरी
1 December 2024
कॉल एक्शन बटन होवर प्रभाव
17 July 2025
होवर स्टेट सिम्फनी
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) */