thumbnail styling

assets/scss/style.scss

@@ -1,2 +1,48 @@
 @import 'buefy';
 @import 'base';
+
+.thumb-overlay {
+  $color: $color__neutral-100; // color of overlay
+
+  box-shadow: 0 0 12px 0 $color__neutral-400 inset,
+              0 2px 12px 3px rgba($color__neutral-300, .5);
+
+  transition: filter 1s;
+  filter: grayscale(.5);
+
+  @media (min-width: $bp__layout) {
+    filter: grayscale(.95);
+    &:hover {
+      filter: grayscale(.5);
+    }
+  }
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+
+  &::before {
+    background: linear-gradient(
+                  to bottom,
+                  rgba($color, .5),
+                  rgba($color, 0),
+                  rgba($color, .7)
+                );
+  }
+
+  &::after {
+    background: linear-gradient(
+                  to left,
+                  rgba($color, .2),
+                  rgba($color, 0),
+                  rgba($color, .2)
+                );
+  }
+}
+

components/GalleryFeatured.vue

@@ -1,7 +1,7 @@
 <template>
   <ul class="gallery-featured">
     <li v-for="(gallery, index) in galleries"
-        class="featured-image"
+        class="featured-image thumb-overlay"
         :style="{ 'background-image': 'url(' + gallery.featuredImage + ')' }"
         :key="index"
         @click="$emit('clicked', index)">
@@ -62,8 +62,26 @@ export default {
   }
 
   .featured-image {
+    z-index: 10;
+    position: relative;
     height: 0;
     padding-top: 100%;
+    margin-bottom: 4px;
+  }
+
+  .gallery-title {
+    z-index: 15;
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    text-align: right;
+    font-size: 1em;
+    @include font-title();
+    color: $color__neutral-900;
+
+    @media (min-width: $bp__gallery-compact) {
+      font-size: 1.3em;
+    }
   }
 
 }

components/GalleryThumbs.vue

@@ -18,7 +18,7 @@
           </li>
           <li v-for="(image, imageIndex) in gallery.images"
               :ref="galleryIndex == 0 && imageIndex == 0 ? 'thumbContainer' : null"
-              class="thumb-container"
+              class="thumb-container thumb-overlay"
               :style="{ 'background-image': 'url(' + image.thumbUrl + ')' }"
               :key="galleryIndex + '.' + imageIndex + '.' + image.url"
               @click="$emit('thumbClick', galleryIndex, imageIndex)">
@@ -231,6 +231,9 @@ export default {
   background-size: cover;
   background-position: center center;
   overflow: hidden;
+
+  padding: 0 2px;
+  background-clip: content-box;
 }
 
 @media (max-width: $bp__layout) {