Last active
June 16, 2020 14:58
-
-
Save kjaymiller/c9a050d44a2fe42a47e2a2eccefec795 to your computer and use it in GitHub Desktop.
Details on Hover
This file contains hidden or 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"> | |
| <title></title> | |
| <link rel="stylesheet" href="style.css" | |
| </head> | |
| <body> | |
| <div class="flex"> | |
| <div class="flex-content"> | |
| <img src="image.jpg" alt=""> | |
| <div class="text-wrapper"> | |
| <div class="text-wrapper-text"> | |
| <h2>Topic 1</h2> | |
| <p class="visible">Lorem unde doloremque tempore sunt quasi mollitia. Fuga autem quos obcaecati architecto eligendi. Reprehenderit ducimus explicabo accusantium sit dolorum A impedit repudiandae architecto voluptatem veritatis cupiditate dolorem? Tempore ducimus error.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex-content"> | |
| <img src="image.jpg" alt=""> | |
| <div class="text-wrapper"> | |
| <div class="text-wrapper-text"> | |
| <h2>Topic 2</h2> | |
| <p class="visible">This is some text that we will put over this image</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex-content"> | |
| <img src="image.jpg" alt=""> | |
| <div class="text-wrapper"> | |
| <div class="text-wrapper-text"> | |
| <h2>Topic 3</h2> | |
| <p class="visible">This is some text that we will put over this image</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex-content"> | |
| <img src="image.jpg" alt=""> <!-- SUPPLY AN IMAGE TO OVERLAY --> | |
| <div class="text-wrapper"> | |
| <div class="text-wrapper-text"> | |
| <h2>Topic 4</h2> | |
| <p class="visible">This is some text that we will put over this image</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or 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
| img { | |
| width: 100%; | |
| display: block; | |
| } | |
| .flex { | |
| display: flex; | |
| flex-flow: row wrap; | |
| justify-content: space-around; | |
| } | |
| .flex-content { | |
| width: 550px; | |
| position: relative; | |
| margin: 1em; | |
| } | |
| .text-wrapper { | |
| position: absolute; | |
| bottom: 0; | |
| background: rgb(0, 0, 0); | |
| background: rgba(0, 0, 0, 0.5); /* Black see-through */ | |
| color: #f1f1f1; | |
| height: 100%; | |
| width: 100%; | |
| transition: .5s ease; | |
| opacity:0; | |
| color: white; | |
| font-size: 20px; | |
| } | |
| .text-wrapper-text { | |
| padding: 1em; | |
| } | |
| .text-wrapper:hover { | |
| opacity: .8; | |
| } | |
| .text-wrapper h2 { | |
| padding-top: 1em; | |
| } | |
| .text-wrapper p { | |
| margin-bottom: 1em; | |
| font-size: 1.25em; | |
| } | |
| figure { | |
| margin: 0; | |
| padding: 0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment