Adds gradient overlapping card image

app/assets/stylesheets/layout.scss

@@ -2667,6 +2667,21 @@ table {
       padding: $line-height / 2 0;
     }
   }
+
+  .figure-card {
+
+    figcaption {
+      z-index: 3;
+    }
+
+    .gradient {
+      background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.01) 1%, rgba(0, 0, 0, 1) 100%);
+      height: 100%;
+      position: absolute;
+      width: 100%;
+      z-index: 2;
+    }
+  }
 }
 
 .feeds-list {

app/views/welcome/_card.html.erb

@@ -1,6 +1,7 @@
 <div id="<%= dom_id(card) %>" class="card small-12 medium-6 column margin-bottom end <%= 'large-4' unless feed_processes_enabled? %>" data-equalizer-watch>
   <%= link_to card.link_url do %>
     <figure class="figure-card">
+      <div class="gradient"></div>
       <% if card.image.present? %>
         <%= image_tag(card.image_url(:large), alt: card.image.title) %>
       <% end %>