Merge pull request #3409 from projectblacklight/browse-hover-main

Browse hover main

Author: corylown

app/assets/stylesheets/spotlight/_browse.scss

@@ -54,42 +54,38 @@ $image-overlay-max-height: 300px;
   }
 
   .image-overlay {
-    border: 2px solid $gray-600;
-    border-radius: $border-radius-lg;
+    border: var(--bs-border-width) solid var(--bs-border-color-translucent);
+    border-radius: var(--bs-border-radius);
     max-height: 240px;
     min-height: 140px;
     overflow: hidden;
     position: relative;
 
     .img-responsive {
-      transition: all 0.5s ease;
       width: 100%;
-
-      &:hover {
-        filter: brightness(70%);
-      }
     }
   }
 
   .text-overlay {
     position: absolute;
     bottom: 0;
     left: 0;
+    height: 100%;
     width: 100%;
-    background: linear-gradient(
-      0deg,
-      rgba(46, 45, 41, 0.7) 70%,
-      rgba(46, 45, 41, 0) 100%
-    );
+    background: linear-gradient(0deg, rgba(46, 45, 41, 0.7) 45%, rgba(46, 45, 41, 0) 100%);
     color: $white;
-    padding: 50px 20px 20px 20px;
-    text-align: center;
+    padding: 5%;
+    display: flex;
+    flex-direction: column; 
+    justify-content: flex-end;
 
-    // prevents potential blur caused by the vertical-align technique
-    transform-style: preserve-3d;
+    &:hover {
+      background: linear-gradient(rgba(46, 45, 41, 0.7), 0%, rgba(46, 45, 41, 0.7) 100%); 
+    }
 
     .browse-category-title {
       font-size: $h3-font-size;
+      text-align: center;
 
       .category-subtitle {
         display: block;

app/assets/stylesheets/spotlight/_featured_browse_categories_block.scss

@@ -56,24 +56,33 @@ $xl-sidebar-five-tile-width: ($container-xl-sidebar * 0.2) - $tile-margin;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-  border: 2px solid $featured-browse-category-border-color;
-  border-radius: $border-radius-lg;
+  border: var(--bs-border-width) solid var(--bs-border-color-translucent);
+  border-radius: var(--bs-border-radius);
   position: relative;
 
   .category-caption {
     bottom: 0px;
     color: $featured-browse-category-caption-color;
     position: absolute;
     text-align: center;
+    height: 100%;
     width: 100%;
-    padding: 35px 15px 15px;
-    background: linear-gradient(0deg, rgba(46, 45, 41, 0.7) 70%, rgba(46, 45, 41, 0) 100%);
-    border-radius: $border-radius-lg;
+    padding: 5%;
+    background: linear-gradient(0deg, rgba(46, 45, 41, 0.7) 45%, rgba(46, 45, 41, 0) 100%);
+    border-radius: var(--bs-border-radius);
+    display: flex;
+    flex-direction: column; 
+    justify-content: flex-end;
+  
+    &:hover {
+      background: linear-gradient(rgba(46, 45, 41, 0.7), 0%, rgba(46, 45, 41, 0.7) 100%); 
+    }
   }
 
   .category-title {
     font-size: $h4-font-size;
     line-height: 1.2;
+    text-align: center;
     margin: 0;
     padding: $spacer * 0.25;
 

app/assets/stylesheets/spotlight/browse_group_categories_block.scss

@@ -8,18 +8,6 @@
     .category-caption {
       z-index: 100;
     }
-
-    .hover-overlay {
-      height: 100%;
-      position: absolute;
-      width: 100%;
-    }
-
-    &:hover {
-      .hover-overlay {
-        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
-      }
-    }
   }
 
   .spotlight-flexbox.browse-categories .box {