Last active
June 3, 2019 12:46
-
-
Save AlanSimpsonMe/b2e61f07a3704a1260c351b234fd725d to your computer and use it in GitHub Desktop.
Thumbnail gallery with small images down the side, large image with caption text beneath it appears when user touches the mouse pointer to the smaller image.
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> | |
| <head> | |
| <title>Thumbnail Gallery</title> | |
| <style type="text/css"> | |
| /* Entire gallery */ | |
| .gallery { | |
| position: relative; | |
| } | |
| /* Small thumbnail images */ | |
| .gallery img { | |
| width: 100px; | |
| display: block; | |
| margin: 10px; | |
| } | |
| /* Block that holds larger image and figure caption */ | |
| .gallery figure { | |
| margin: 0; | |
| padding: 0; | |
| position: absolute; | |
| top: 0; | |
| left: 110px; | |
| width: 800px; | |
| } | |
| /* Larger image */ | |
| .gallery figure img { | |
| width: 680px; | |
| margin: 0 0 0 10px; | |
| } | |
| /* Caption text under large image */ | |
| .gallery figure figcaption { | |
| font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; | |
| font-size: 130%; | |
| margin-left: 10px; | |
| } | |
| /* Figure block for larger image (visibility) */ | |
| .gallery img+figure { | |
| display: none; | |
| } | |
| /* When mouse pointer touches small image, show large figure block to right */ | |
| .gallery img:hover+figure { | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Thumbnail gallery</h1> | |
| <p>Point to or tap any small image to see a larger version.</p> | |
| <div class="gallery"> | |
| <!-- Put two of each image in its own div inside the gallery div --> | |
| <img src="pix2/flower01.png" alt=""> | |
| <figure> | |
| <img src="pix2/flower01.png" alt=""> | |
| <figcaption>This is the first image's caption text.</figcaption> | |
| </figure> | |
| <img src="pix2/flower02.png" alt=""> | |
| <figure> | |
| <img src="pix2/flower02.png" alt=""> | |
| <figcaption>This is the second image's caption text.</figcaption> | |
| </figure> | |
| <img src="pix2/flower03.png" alt=""> | |
| <figure> | |
| <img src="pix2/flower03.png" alt=""> | |
| <figcaption>This is the third image's caption text.</figcaption> | |
| </figure> | |
| <img src="pix2/flower04.png" alt=""> | |
| <figure> | |
| <img src="pix2/flower04.png" alt=""> | |
| <figcaption>This is the fourth image's caption text.</figcaption> | |
| </figure> | |
| <img src="pix2/flower05.png" alt=""> | |
| <figure> | |
| <img src="pix2/flower05.png" alt=""> | |
| <figcaption>This is the fifth image's caption text.</figcaption> | |
| </figure> | |
| <img src="pix2/flower06.png" alt=""> | |
| <figure> | |
| <img src="pix2/flower06.png" alt=""> | |
| <figcaption>This is the sixth image's caption text.</figcaption> | |
| </figure> | |
| </div><!-- End gallery --> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment