Last active
February 14, 2020 04:27
-
-
Save awareness481/210936caa7e2e34af00adec8f1ac4ccd to your computer and use it in GitHub Desktop.
Slide in background CSS animation on hover
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>repl.it</title> | |
| <link href="style.css" rel="stylesheet" type="text/css" /> | |
| </head> | |
| <body> | |
| <div class='container'> | |
| <div class='effect'> | |
| </div> | |
| </div> | |
| <script src="script.js"> | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .container { | |
| width: 200px; | |
| height: 200px; | |
| position: relative; | |
| border: 1px solid black; | |
| } | |
| .effect { | |
| background-color: blue; | |
| width: 100%; | |
| height: 100%; | |
| position: absolute; | |
| bottom: -100%; | |
| } | |
| .container:hover .effect { | |
| animation-duration: 0.4s; | |
| animation-name: slidein; | |
| animation-fill-mode: forwards; | |
| } | |
| @keyframes slidein { | |
| to { | |
| bottom: 0; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment