add overlay (#345)

cesko-digital · Aug 12, 2023 · c14cc9e · c14cc9e
1 parent 3e846ee
commit c14cc9e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/components/basecomponents/QuizGame/ImageContainer.tsx b/components/basecomponents/QuizGame/ImageContainer.tsx
@@ -31,6 +31,7 @@ const ImageContainer = ({ phrase, onClick, correct, disabled }: ImageContainerPr
     >
       <button className={'w-full h-full relative'}>
         <Image src={phrase.getImageUrl() ?? ''} layout="fill" sizes="33vw" objectFit="cover" alt={phrase.getTranslation(otherLanguage)} />
+        <div className={'hidden'} />
       </button>
     </div>
   );

diff --git a/components/basecomponents/QuizGame/imageStyle.module.css b/components/basecomponents/QuizGame/imageStyle.module.css
@@ -51,9 +51,29 @@
 }
 
 .match {
-  animation: dance 0.7s, shine 0.7s;
+  animation: dance 0.7s;
+}
+
+.match div:last-child {
+  display: block;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  animation: shine 0.7s;
 }
 
 .dontMatch {
-  animation: shake 0.7s, shineRed 0.7s;
+  animation: shake 0.7s;
+}
+
+.dontMatch div:last-child {
+  display: block;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  animation: shineRed 0.7s;
 }