Update 2 files

- /static/style.css
- /wiki/pages/home.html

static/style.css

 :root {
     --link-margin: 15%;
+    --animTime: 0.4s;
 }
 
 .content {
@@ -109,3 +110,31 @@ img .navcott {
     margin-top: var(--link-margin);
     margin-bottom: var(--link-margin);
 }
+
+@keyframes dripper {
+    0% {
+        background-position-y: 120%;
+    }
+    100% {
+        background-position-y: -20%;
+    }
+}
+
+.center {
+    background-position-x: center;
+}
+
+.left {
+    background-position-x: -100%;
+}
+
+.right {
+    background-position-x: 150%;
+}
+
+.urineHover:hover {
+    animation: dripper var(--animTime) ease-in 0s 1 normal forwards;
+    background-image: url(https://static.igem.wiki/teams/4856/wiki/video-frames/urine-dude-without-legs-removebg.png);
+    background-repeat: no-repeat;
+    background-size: 80%;
+}
\ No newline at end of file

wiki/pages/home.html

@@ -21,13 +21,13 @@
     <hr>
     <div class = "links">
       <span class = "column">
-        <div class = "row center">
+        <div class = "row center urineHover">
           <a> Our Team </a>
         </div>
-        <div class = "row left">
+        <div class = "row left urineHover">
           <a> Parts </a>
         </div>
-        <div class = "row center">
+        <div class = "row center urineHover">
           <a> Awards </a>
         </div>
       </span>
@@ -35,13 +35,13 @@
         <img src="https://static.igem.wiki/teams/4856/wiki/video-frames/urine-dude-straight-on-no-bg.png" class = "navcott" width = 60% alt="Urine Guy">
       </span>-->
       <span class = "column">
-        <div class = "row center">
+        <div class = "row center urineHover">
           <a> Description </a>
         </div>
-        <div class = "row right">
+        <div class = "row right urineHover">
           <a> Attributions </a>
         </div>
-        <div class = "row center">
+        <div class = "row center urineHover">
           <a> Safety </a>
         </div>
       </span>