Merge pull request #30 from RIT-SWEN-261-02/need-list-image

Need list image and animation

1 files changed, 38 insertions, 3 deletions

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index 622b64a..86a021e 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -5,6 +5,19 @@
     border-radius: 5px;
 }
 
+.needEntry:hover {
+    .need-image {
+        mask-image: none;
+        width: 210px
+    }
+    .left {
+        width: 32.5%;
+    }
+    .prog {
+        width: 72.5%;
+    }
+}
+
 #needList {
     display: flex;
     flex-direction: column;
@@ -20,18 +33,36 @@
     font-size: 10pt;
 }
 
+.need-image {
+    transition: all 0.15s ease-in-out;
+    height: 130px;
+    width: 200px;
+    margin: -10px 0 0 -10px;
+    object-fit: cover;
+    border-radius: 5px;
+    mask-image: linear-gradient(to right, rgb(255,255,255) 0, rgb(255,255,255,.1) 60%, rgb(255,255,255,0) 100%);
+}
+
 .split {
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
-
-
+   
     .left {
+        width: 15%;
+        transition: all 0.2s ease-in-out;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .middle {
+        width: 42.5%;
         display: flex;
+        align-items: start;
         flex-direction: column;
     }
 
     .right {
+        width: 42.5%;
         display: flex;
         flex-direction: column;
         align-items: end;
@@ -47,8 +78,12 @@
 }
 
 .prog {
+    transition: all 0.2s ease-in-out;
+    width: 85%;
     display: flex;
     flex-direction: column;
+    align-self: end;
+    margin-top: -5.25%;
 }
 
 .clickable {