diff options
Diffstat (limited to 'site')
| -rw-r--r-- | site/common/css/cssbox/README.md | 7 | ||||
| -rw-r--r-- | site/common/css/cssbox/cssbox.css | 22 | ||||
| -rw-r--r-- | site/faq/index.php | 4 |
3 files changed, 24 insertions, 9 deletions
diff --git a/site/common/css/cssbox/README.md b/site/common/css/cssbox/README.md index 8a55ab1..ceed61a 100644 --- a/site/common/css/cssbox/README.md +++ b/site/common/css/cssbox/README.md @@ -2,7 +2,7 @@ A simple, pure-CSS Lightbox replacement. ## Why CSSBox? -* Actually lightweight (643b including comments, 347b excluding comments, unminified!) +* Actually lightweight (843b including comments, 547b excluding comments, unminified!) * Centers the image with a nice, yet simple border * Completely responsive, works on any screen size * Has a pretty fade in animation @@ -12,11 +12,14 @@ Upload cssbox.css to your server and add a stylesheet link to it in your CSS. Add your images like this: - <img class="cssbox_thumb" tabindex=1 src="image_thumbnail.png" /><img class="cssbox_full" src="image_full.png" /> + <img class="cssbox_thumb" tabindex=1 src="image_thumbnail.png" /><span class="cssbox_full"><img src="image_full.png" /></span> When a visitor clicks the tumbnail, the fullsize preview will appear in the center of the screen. +## Example +An example page is available in the gh-pages branch, or online on [GitHub Pages](https://thelastproject.github.io/CSSBox/). + ## License Creative Commons Zero 1.0 diff --git a/site/common/css/cssbox/cssbox.css b/site/common/css/cssbox/cssbox.css index 9efc9f0..ca96b53 100644 --- a/site/common/css/cssbox/cssbox.css +++ b/site/common/css/cssbox/cssbox.css @@ -1,20 +1,32 @@ /* The work below, CSSBox, is released under the Creative Commons Zero 1.0 license and is available on https://notabug.org/SylvieLorxu/CSSBox */ -img.cssbox_full { +span.cssbox_full { position: fixed; + height: 100%; + width: 100%; + background-color: rgba(0,0,0,0.8); + top: 0; + left: 0; + opacity: 0; + visibility: hidden; + transition: visibility 0s, opacity 0.5s linear; +} + +span.cssbox_full img { + position: fixed; + background-color: white; margin: 0; padding: 0px; + max-height: 90%; + max-width: 90%; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); border: 5px solid black; - visibility: hidden; - opacity: 0; - transition: visibility 0s, opacity 0.5s linear; } -img.cssbox_thumb:focus + img.cssbox_full { +img.cssbox_thumb:focus + span.cssbox_full { visibility: visible; opacity: 1; } diff --git a/site/faq/index.php b/site/faq/index.php index 0170578..2c41548 100644 --- a/site/faq/index.php +++ b/site/faq/index.php @@ -713,11 +713,11 @@ </p> <p> SOIC-8 SPI flash chip:<br/> - <img class="thumb cssbox_thumb" tabindex=1 src="images/soic8.jpg" alt="SOIC-8 SPI flash chip" /><img class="cssbox_full" src="images/soic8.jpg" alt="SOIT-8 SPI flash chip" /> + <img class="thumb cssbox_thumb" tabindex=1 src="images/soic8.jpg" alt="SOIC-8 SPI flash chip" /><span class="cssbox_full"><img src="images/soic8.jpg" alt="SOIT-8 SPI flash chip" /></span> </p> <p> SOIC-16 SPI flash chip:<br/> - <img class="thumb cssbox_thumb" tabindex=1 src="images/soic16.jpg" alt="SOIC-16 SPI flash chip" /><img class="cssbox_full" src="images/soic16.jpg" alt="SOIC-16 SPI flash chip" /> + <img class="thumb cssbox_thumb" tabindex=1 src="images/soic16.jpg" alt="SOIC-16 SPI flash chip" /><span class="cssbox_full"><img src="images/soic16.jpg" alt="SOIC-16 SPI flash chip" /></span> </p> <p> <a href="#pagetop">Back to top of page</a> |