Created
October 5, 2018 13:39
-
-
Save Karnak19/9c1c7797d0516d1a3e6e2e3a4b64e7fc to your computer and use it in GitHub Desktop.
Odyssey quest 03
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
| /* General Style */ | |
| .gandalf { | |
| position: relative; | |
| text-align: center; | |
| color: white; | |
| width: 30%; | |
| height: auto; | |
| font-family: Arial, Helvetica, sans-serif; | |
| } | |
| .gandalf img { | |
| opacity: 0.5; | |
| width: 100%; | |
| } | |
| .gandalf:hover img { | |
| opacity: 1; | |
| -webkit-transition: opacity 0.2s ease-in-out;/* transition pour Chrome et Safari */ | |
| -moz-transition: opacity 0.2s ease-in-out;/* transition pour Firefox */ | |
| -o-transition: opacity 0.2s ease-in-out;/* transition pour Opéra */ | |
| } | |
| .gandalf h1 { | |
| font-size: 70px; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| .gandalf:hover h1 { | |
| top: 90%; | |
| font-size: 30px; | |
| } | |
| .bubble { | |
| font-size: 40px; | |
| background-color:rgba(100, 100, 100, 0.7); | |
| position: absolute; | |
| top: 10%; | |
| left: 10%; | |
| right: 10%; | |
| /*transform: translate(-50%, -50%);*/ | |
| border-radius: 8px 8px 8px 8px; | |
| -webkit-transition: opacity 0.5s ease-in-out;/* transition pour Chrome et Safari */ | |
| -moz-transition: opacity 0.5s ease-in-out;/* transition pour Firefox */ | |
| -o-transition: opacity 0.5s ease-in-out;/* transition pour Opéra */ | |
| } | |
| .bubble p { | |
| color: black; | |
| } | |
| .gandalf:hover .bubble { | |
| opacity: 0; | |
| } | |
| span { | |
| font-size: 40px; | |
| font-weight: bold; | |
| color: coral; | |
| } |
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> | |
| <link rel="stylesheet" href="gandalf.css" /> | |
| </head> | |
| <body> | |
| <div class="gandalf"> | |
| <img src="http://images.innoveduc.fr/integration_gandalf.png" alt="" /> | |
| <h1>Gandalf</h1> | |
| <div class="bubble"> | |
| <p>reward <span>1000</span> golden coins</p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment