Cards: Images go semitransparent on hover, to let background color sh…

…ine through

source/stylesheets/refills/_cards.scss

@@ -17,10 +17,9 @@
   $card-border: 1px solid $card-border-color;
   $card-background: lighten($card-border-color, 10%);
   $card-header-background: $card-background;
-  $card-hover-background: lighten($card-background, 5%);
-  $card-image-background: #DBD199;
-  $card-image-hover-background: lighten($card-image-background, 5%);
   $card-margin: 1em;
+  $card-image-hover-opacity: 0.7;
+  $card-image-hover-color: #F8F2B4;
 
   @include flex-basis(15em);
   @include flex-grow(1);
@@ -33,16 +32,19 @@
   margin: 0 $card-margin $base-spacing $card-margin;
   position: relative;
 
+
   .card-image {
     overflow: hidden;
+    height: 150px;
     max-height: 150px;
+    background-color: $card-image-hover-color;
 
     img {
       @include transition (all 0.2s ease-in-out);
-      background: $card-image-background;
       border-top-left-radius: $base-border-radius;
       border-top-right-radius: $base-border-radius;
       width: 100%;
+      opacity: 1;
     }
   }
 
@@ -65,17 +67,13 @@
       margin: 0 0 ($base-spacing / 2);
     }
   }
-  
+
   &:focus,
   &:hover {
-    background-color: $card-hover-background;
-
-    .card-image img {
-      background: $card-image-hover-background;
-    }
-
-    .card-header {
-      background-color: $card-hover-background;
+    cursor: pointer;
+
+    img {
+      opacity: $card-image-hover-opacity;
     }
   }