Merge pull request #66 from dom111/feature/add-transparent-checkerboard-to-lightbox

Add checkerboard styling to transparent images on hover. This fixes #54.

assets/css/style.css

@@ -436,3 +436,12 @@ main ul li .cancel-upload {
 .basicLightbox.font .basicLightbox__placeholder, .basicLightbox.text .basicLightbox__placeholder {
   background: #fff;
 }
+
+body:not([data-disable-checkerboard]) .basicLightbox.image img {
+  pointer-events: all;
+}
+
+body:not([data-disable-checkerboard]) .basicLightbox.image img:hover {
+  background: #eee url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".25" ><rect x="200" width="200" height="200" /><rect y="200" width="200" height="200" /></svg>');
+  background-size: 30px 30px;
+}

assets/scss/style.scss

@@ -263,4 +263,14 @@ main {
       background: #fff;
     }
   }
+
+  body:not([data-disable-checkerboard]) &.image img {
+    pointer-events: all;
+
+    &:hover {
+      // copied from https://codepen.io/pascalvgaal/pen/jPXPNP
+      background: #eee url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".25" ><rect x="200" width="200" height="200" /><rect y="200" width="200" height="200" /></svg>');
+      background-size: 30px 30px;
+    }
+  }
 }

docker/test/Dockerfile

@@ -9,6 +9,9 @@ RUN \
   for i in 0 1 2 3 4 5 6 7 8 9; do \
     curl -sL -o "/var/www/html/$i.jpg" "https://picsum.photos/1280/960"; \
   done && \
+\
+  # add transparent png
+  curl -s -o /var/www/html/transparent-test.png "https://www.w3.org/Graphics/PNG/alphatest.png" && \
 \
   # add fonts
   for font in notoserif/NotoSerif-Regular.ttf unlock/Unlock-Regular.ttf blackandwhitepicture/BlackAndWhitePicture-Regular.ttf indieflower/IndieFlower-Regular.ttf; do \