Add profile hover animation

master
Max 5 years ago
parent 8218dd3e38
commit 02b06f4f6f

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

@ -3,7 +3,12 @@
<!--on small screen--> <!--on small screen-->
<mat-toolbar color="primary" id="toolbar" fxShow="true" fxHide.gt-sm="true"> <mat-toolbar color="primary" id="toolbar" fxShow="true" fxHide.gt-sm="true">
<mat-toolbar-row> <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> <span id="username">{{userProfile.username}}</span>
<button mat-icon-button <button mat-icon-button
class="request-button" class="request-button"

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

Loading…
Cancel
Save