diff --git a/opentech/static_src/src/sass/components/_card.scss b/opentech/static_src/src/sass/components/_card.scss
index cd2d5905c02d711f834316978882f094758478b3..93ec48387748c9b126e13532a5f68e67524a90f7 100644
--- a/opentech/static_src/src/sass/components/_card.scss
+++ b/opentech/static_src/src/sass/components/_card.scss
@@ -1,11 +1,23 @@
 .card {
+    $root: &;
     position: relative;
     padding: 30px 30px 100px;
     background-color: $color--white;
+    transition: background-color, color, $transition;
+
+    &:hover {
+        color: $color--white;
+        background: $color--light-blue;
+    }
 
     &__teaser {
         font-size: 16px;
         color: $color--default;
+        transition: color $transition;
+
+        #{$root}:hover & {
+            color: $color--white;
+        }
     }
 }