hover animation for need list image

1 files changed, 16 insertions, 0 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 5cfa479..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;
@@ -21,6 +34,7 @@
 }
 
 .need-image {
+    transition: all 0.15s ease-in-out;
     height: 130px;
     width: 200px;
     margin: -10px 0 0 -10px;
@@ -35,6 +49,7 @@
    
     .left {
         width: 15%;
+        transition: all 0.2s ease-in-out;
         display: flex;
         flex-direction: column;
     }
@@ -63,6 +78,7 @@
 }
 
 .prog {
+    transition: all 0.2s ease-in-out;
     width: 85%;
     display: flex;
     flex-direction: column;