Created
January 18, 2020 05:20
-
-
Save lebowvsky/1bc6d61000ffada2ea44eecae59c699f to your computer and use it in GitHub Desktop.
Odyssey : Add style with CSS
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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <link rel="stylesheet" type="text/css" href="style.css" media="all" /> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <img src="http://images.innoveduc.fr/integration_gandalf.png" alt="Gandalf"> | |
| <p>reward <span>1000</span> golden coins</p> | |
| <h2>Gandalf</h2> | |
| </div> | |
| </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
| body { | |
| background-color: rgb(54, 54, 54); | |
| } | |
| .container { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| text-align: center; | |
| } | |
| img { | |
| position: relative; | |
| z-index: -1; | |
| opacity: 0.5; | |
| } | |
| p { | |
| position: absolute; | |
| top: 3%; | |
| left: 10%; | |
| width: 80%; | |
| margin: 0; | |
| z-index: 1000; | |
| font-size: 4em; | |
| background-color: rgba(255, 255, 255, 0.5); | |
| text-align: center; | |
| border-radius: 10px; | |
| transition: opacity 250ms ease-in-out; | |
| } | |
| span { | |
| color: orange; | |
| } | |
| h2 { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| font-size: 4em; | |
| color: white; | |
| transition: all 250ms ease-in-out; | |
| } | |
| .container:hover img { | |
| opacity: 1; | |
| } | |
| .container:hover p { | |
| opacity: 0; | |
| } | |
| .container:hover h2 { | |
| top: 95%; | |
| transform: translate(-50%, -100%); | |
| margin: 0; | |
| font-size: 2em; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment