Fix hovered meld cards being covered by adjacent cards

taw · Oct 18, 2018 · 5d8ce25 · 5d8ce25
1 parent d237699
commit 5d8ce25
Showing 1 changed file with 4 additions and 7 deletions.
diff --git a/frontend/app/assets/stylesheets/application.scss b/frontend/app/assets/stylesheets/application.scss
@@ -212,6 +212,7 @@ form.search {
 .card_picture_container {
   position: relative;
   perspective: 1000px;
+  z-index: 0;
 
   .foil_layer {
     position: absolute;
@@ -230,7 +231,6 @@ form.search {
     left: 0;
     top: 0;
     position: relative;
-    z-index: 0;
 
     img {
       width: 100%;
@@ -240,9 +240,6 @@ form.search {
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
 
-    &:hover {
-      z-index: 1;
-    }
     &.flip:hover {
       transform: rotateZ(180deg);
     }
@@ -293,6 +290,9 @@ form.search {
       }
     }
   }
+  &:hover {
+    z-index: 1;
+  }
   & .dfc,
   & .dfc_back {
   }
@@ -328,15 +328,12 @@ form.search {
   }
   &:hover .melded {
     transform: rotateY(180deg);
-    z-index: 1;
   }
   &:hover .meld0 {
     transform: translateY(-30%) rotateY(360deg);
-    z-index: 1;
   }
   &:hover .meld1 {
     transform: translateY(72%) rotateY(360deg);
-    z-index: 1;
   }
 }
 .picture_missing {