Tint person pictures per styleguide but remove on hover

agaric/sass/agaric/_component.hero.scss

@@ -42,6 +42,32 @@
 .hero.is-blue {
   color: $white;
   background-color: $blue;
+  // This is the same as we do for all cards at sass/agaric/_component.card.scss
+  // but we're only doing this for people so far, who are hard-coded to blue.
+  & > .container > .hero-image > .hero-image-shadow {
+    position: relative;
+  }
+  & > .container > .hero-image > .hero-image-shadow:before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    box-shadow: inset 0 0 0 100vmax rgba($blue, .5);
+    -moz-transition: all .3s linear;
+    -webkit-transition: all .3s linear;
+    -ms-transition: all .3s linear;
+    -o-transition: all .3s linear;
+    transition: all .3s linear;
+  }
+  &:hover {
+  color: $white;
+  background-color: darken($blue, 5%);
+  & > .container > .hero-image > .hero-image-shadow:before {
+    box-shadow: none;
+  }
 }
 
 .hero.is-marine {

agaric/templates/layout/node--people--full.html.twig

@@ -89,10 +89,12 @@
     {% set classes = classes|merge(['is-blue']) %}
   {% endif %}
   {# Header hero region #}
-  <section{{ attributes.addClass(classes) }}>
+  <section{{ attributes.addClass(classes) }} data-headerbg="transparent">
     <div class="container">
       <div class="hero-image">
-        {{ content.field_image }}
+        <div class="hero-image-shadow">
+          {{ content.field_image }}
+        </div>
         <h1 class="title">{{ label }}</h1>
       </div>
       <div class="hero-body">