fixed hover effect

static/css/main.css

@@ -2,6 +2,7 @@
 
 * {
     box-sizing: border-box;
+    z-index: 0;
 }
 
 body {
@@ -117,19 +118,21 @@ img {
 
 .prank-button a {
     color: black;
+    position: relative;
 }
 
 .prank-button a:hover {
     text-decoration: none;
 }
 
-.prank-button a:hover:after {
-    content: url("../img/circle-hand.png");
+.hover-circle {
     position: absolute;
-    z-index: 5;
-    top: 660px;
-    left: 410px;
-    transform: scale(0.5);
+    z-index: 10;
+    top: -50px;
+    left: 0px;
+    max-height: 100%;
+    max-width: 100%;
+    display: none;
 }
 
 .banner {

static/index.html

@@ -38,6 +38,7 @@
                             <a id="prank-button">
                                 Demander une mission !
                                 <img src="img/underline-red.png" class="underline"/>
+                                <img src="img/circle-hand.png" class="hover-circle"/>
                             </a>
                         </div>
                         <p id="prank-desc">

static/js/anim.js

@@ -10,5 +10,7 @@ $(window).on("load", function() {
     $(document).on("click", function() {
         type.options({speed: 1});
     });*/
+    
+});
 
-});
+$("#prank-button").hover(function () { $('.hover-circle').fadeIn(100) }, function(){ $('.hover-circle').fadeOut(100) });