Created
September 11, 2017 14:04
-
-
Save AlanSimpsonMe/430106c4f7495a297253e3e13533e05d to your computer and use it in GitHub Desktop.
Super simple CSS thumbnail gallery, no JavaScript.
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> | |
| <!-- Sample CSS HTML thumbnail gallery by Alan Simpson --> | |
| <!-- More goodies available from http://AlanSimpson.me and https://docs.com/learnhtml-club --> | |
| <html> | |
| <head> | |
| <title>Thumbnail Gallery</title> | |
| <style type="text/css"> | |
| /* Entire gallery */ | |
| .gallery { | |
| position: relative; | |
| } | |
| /* Smaller divs with two img tags each */ | |
| .gallery div { | |
| padding: 2px; | |
| width: 120px; | |
| } | |
| /* First image in each smaller div */ | |
| .gallery div img:nth-child(1) { | |
| width: 100px; | |
| } | |
| /* Second image in each smaller div */ | |
| .gallery div img:nth-child(2) { | |
| position: absolute; | |
| top: 10px; | |
| left: 120px; | |
| z-index: 10; | |
| visibility: hidden; | |
| } | |
| /* Hover on any smaller div */ | |
| .gallery div:hover img:nth-child(2) { | |
| visibility: visible; | |
| } | |
| </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 --> | |
| <div> | |
| <img src="flower01.png" alt=""> | |
| <img src="flower01.png" alt=""> | |
| </div> | |
| <div> | |
| <img src="flower02.png" alt=""> | |
| <img src="flower02.png" alt=""> | |
| </div> | |
| <div> | |
| <img src="flower03.png" alt=""> | |
| <img src="flower03.png" alt=""> | |
| </div> | |
| <div> | |
| <img src="flower04.png" alt=""> | |
| <img src="flower04.png" alt=""> | |
| </div> | |
| <div> | |
| <img src="flower05.png" alt=""> | |
| <img src="flower05.png" alt=""> | |
| </div> | |
| </div><!-- End gallery --> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment