Add profile hover animation

src/app/components/group/group.component.sass

@@ -49,6 +49,8 @@ $mat-card-header-size: 100px !default
     border-radius: 50%
     flex-shrink: 0
     background-size: cover
+    &:hover
+      height: 200
     // Makes `<img>` tags behave like `background-size: cover`. Not supported
     // in IE, but we're using it as a progressive enhancement.
     object-fit: cover

src/app/components/profile/profile.component.html

@@ -3,7 +3,12 @@
         <!--on small screen-->
         <mat-toolbar color="primary" id="toolbar" fxShow="true" fxHide.gt-sm="true">
             <mat-toolbar-row>
-                <div class="profile-picture"></div>
+                <div class="hover-box">
+                    <img class="profile-picture" src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>  
+                    <mat-icon id="icon">camera_alt</mat-icon>
+                </div>
+
+                
                 <span id="username">{{userProfile.username}}</span>
                 <button mat-icon-button 
                 class="request-button" 

src/app/components/profile/profile.component.sass

@@ -39,17 +39,37 @@
   #handle
     font-size: 14px
 
+#icon 
+  display: none
+  position: absolute
+  z-index: 11
+  color: white
+
 $mat-card-header-size: 100px !default
-.profile-picture
+.hover-box
-  background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)
+  cursor: pointer
-  height: $mat-card-header-size
+  text-align: center
-  width: $mat-card-header-size
+  display: flex
-  border-radius: 50%
+  justify-content: center
-  flex-shrink: 0
+  align-items: center
-  background-size: cover
+  .profile-picture
-  // Makes `<img>` tags behave like `background-size: cover`. Not supported
+    height: $mat-card-header-size
-  // in IE, but we're using it as a progressive enhancement.
+    width: $mat-card-header-size
-  object-fit: cover
+    border-radius: 50%
+    flex-shrink: 0
+    background-size: cover
+    transition-duration: 0.5s
+    z-index: 10
+    object-fit: cover
+  &:hover
+    .profile-picture
+      filter: brightness(70%)
+    #icon
+      display: block
+      filter: none
+    // Makes `<img>` tags behave like `background-size: cover`. Not supported
+    // in IE, but we're using it as a progressive enhancement.
+