featured posts interaction

assets/_src/less/ascribe/_blog.less

@@ -120,6 +120,8 @@
     @media (@screen-sm) {
         .grid__col { flex: 33%; }
     }
+
+    .grid__col > a { display: block; }
 }
 
 .subtemplate--featured--more {
@@ -128,9 +130,40 @@
 }
 
 .featured {
+    position: relative;
+    transition: .2s ease-out;
 
+    a:hover &,
+    a:focus & {
+        transform: scale(1.01);
+        box-shadow: 0 4px 8px fade(#000, 20%);
+    }
+
+    a:active & {
+        top: 1px;
+        transform: none;
+        transition: none;
+        box-shadow: none;
+    }
 }
 
 .featured__title {
     &:extend(.h4);
+    margin: 0;
+    font-size: @font-size-base;
+    color: #fff;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    background: fade(@blueDeep, 70%);
+    padding: (@spacer / 4);
+    transition: .2s ease-out;
+
+    a:hover &,
+    a:focus & { color: @link-color; }
+}
+
+.featured__image {
+    max-height: 175px;
+    display: block;
 }