assets/sass/components/_avatar.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

.avatar {
    width: 100%;
    height: $width-right-col - 6rem;
    position: relative;
    overflow: hidden;

    &__container {
        @include hz-center;
        width: 100%;
        clip-path: circle(50% at 50% 56%);
        height: $width-right-col - 8rem;
        text-align: center;
        transition: all 0.3s cubic-bezier($cubic);

        &:hover {
            width: 110%;
        }
    }

    &__img {
        object-fit: cover;
        width: 110%;
        transition: all 0.3s cubic-bezier($cubic);
        @include all-center;

        &:hover {
            width: 105%;
        }
    }
}