From 4bee44f11d3e5e3fd912f0e2728a547f56887d65 Mon Sep 17 00:00:00 2001
From: devfake <devfakeplus@googlemail.com>
Date: Tue, 23 Jun 2015 13:31:37 +0200
Subject: [PATCH] enable hover for card animation

---
 .../client/app/modules/lobby/views/lobby.html | 51 ++++++++++++++-----
 1 file changed, 38 insertions(+), 13 deletions(-)

diff --git a/site/client/app/modules/lobby/views/lobby.html b/site/client/app/modules/lobby/views/lobby.html
index 9fbe3f2..1dc4512 100644
--- a/site/client/app/modules/lobby/views/lobby.html
+++ b/site/client/app/modules/lobby/views/lobby.html
@@ -3,45 +3,56 @@
     float: left;
     border-radius: 12px;
     position: relative;
-    z-index: 10;;
+    z-index: 10;
+    top: 5px;
+    left: 5px;
   }
 
   .bla {
-    padding: 4px;
-    float: left;
     border-radius: 14px;
-    margin: 100px;
-    position: relative;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    opacity: 0;
+  }
 
+  .card-wrap:hover .bla {
     box-shadow: 0 0 2px 0 orange;
+    opacity: 1;
   }
 
   .shadow {
     border-radius: 35%;
     box-shadow: 0 0 15px 14px #ffa500;
     content: "";
-    height: calc(100% - 40px);
-    left: 10px;
+    height: calc(100% - 50px);
+    left: 15px;
     position: absolute;
-    width: calc(100% - 20px);
+    width: calc(100% - 22px);
     z-index: 1;
-    top: 20px;
+    top: 30px;
     transition: all 0.3s ease-in-out 0s;
+    opacity: 0;
+  }
 
+  .card-wrap:hover .shadow {
     -webkit-animation: Shadow 4s ease-in-out infinite;
     -moz-animation: Shadow 4s ease-in-out infinite;
     animation: Shadow 4s ease-in-out infinite;
   }
 
-
   .ani {
+    background: linear-gradient(2deg, #000, #000, #000, #000);;
+    transition: all .05s ease-in-out 0s;
+  }
+
+  .card-wrap .ani {
     background: linear-gradient(2deg, #ffa500, #ffd68b, #ffa500, #ffa500);
     background-size: 800% 800%;
 
     -webkit-animation: AnimationName 3s ease infinite;
     -moz-animation: AnimationName 3s ease infinite;
     animation: AnimationName 3s ease infinite;
-
   }
 
   @-webkit-keyframes Shadow {
@@ -96,14 +107,19 @@
   }
 
   .overlay-card {
-    background: linear-gradient(2deg, rgba(255,255,255,.05), rgba(255,255,255,.3), rgba(255,255,255,.1));
+    background: linear-gradient(2deg, rgba(255,255,255,.03), rgba(255,255,255,.2), rgba(255,255,255,.05));
     background-size: 800% 800%;
     position: absolute;
     z-index: 20;
     width: calc(100% - 5px);
     height: calc(100% - 5px);
     border-radius: 12px;
+    opacity: 0;
+    cursor: pointer;
+  }
 
+  .card-wrap:hover .overlay-card {
+    opacity: 1;
     -webkit-animation: AnimationName 10s ease infinite;
     -moz-animation: AnimationName 10s ease infinite;
     animation: AnimationName 10s ease infinite;
@@ -124,9 +140,18 @@
     50%{background-position:50% 100%}
     100%{background-position:51% 0%}
   }
+
+  .card-wrap {
+    float: left;
+    width: 160px;
+    height: 294px;
+    position: relative;
+    padding: 4px;
+  }
 </style>
 
-  <div class="bla ani">
+  <div class="card-wrap">
+    <div class="bla ani"></div>
     <img src="http://80.240.132.120/gwent/assets/cards/ballista1.png" class="card" width="150" height="auto">
     <div class="shadow"></div>
     <div class="overlay-card"></div>