diff --git a/resources/css/blocks/narrative-card.css b/resources/css/blocks/narrative-card.css
index 52a7b30..e205e2c 100644
--- a/resources/css/blocks/narrative-card.css
+++ b/resources/css/blocks/narrative-card.css
@@ -41,6 +41,17 @@
     }
   }
 
+  &--black-white-cover-filter {
+    .narrative-card__cover {
+      @apply grayscale;
+      filter: grayscale(100%);
+
+      &:hover {
+        filter: grayscale(0%);
+      }
+    }
+  }
+
   &__cover {
     --margin: 1rem;
     @apply flex justify-center items-center w-full h-auto object-cover border border-primary mx-auto;