From e60a425f2c5e260eb95aca3ee19d2ca8d3c973e0 Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Fri, 20 Jan 2017 13:42:35 +0100
Subject: [PATCH] Add greyscale to matched pairs

Makes them less distractive.
---
 memory-game.css | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/memory-game.css b/memory-game.css
index 33be0e2..99c88b5 100644
--- a/memory-game.css
+++ b/memory-game.css
@@ -30,9 +30,9 @@ html .h5p-memory-game > ul {
   -webkit-perspective: 400px;
   -moz-perspective: 400px;
   perspective: 400px;
-  -webkit-transition: opacity 0.4s;
-  -moz-transition: opacity 0.4s;
-  transition: opacity 0.4s;
+  -webkit-transition: opacity 0.4s, filter 0.4s;
+  -moz-transition: opacity 0.4s, filter 0.4s;
+  transition: opacity 0.4s, filter 0.4s;
 }
 .h5p-memory-game .h5p-memory-card .h5p-back,
 .h5p-memory-game .h5p-memory-card .h5p-front {
@@ -109,7 +109,8 @@ html .h5p-memory-game > ul {
   -ms-transform: scale(0,1.1);
 }
 .h5p-memory-game .h5p-memory-card.h5p-matched {
-  opacity: 0.25;
+  opacity: 0.3;
+  filter: grayscale(100%);
 }
 
 .h5p-memory-game .h5p-feedback {