Smooth Fade

Element fades when user hovers over its container

Hover and the box will appear

Now you can see me

Hover and box will disappear

Now you can see me

HTML

<div class="fade-in">
    <div class="fade-item box">
        <p>Now you can see me</p>
    </div>
</div>

Sass

.box {
    width: 100%;
    height: 150px;
    background-color: lighten($elr-blue, 10%);
    border-color: $elr-blue;
    text-align: center;
    display: flex;
    align-items: center;
    color: $white;

    p {
        width: 100%;
        font-size: to-rems(24px);
    }
}

.fade-in,
.fade-out {
    padding: 10px;
    background-color: $lightest-grey;
}

.fade-in { @include elr-fade('show', .3s); }
.fade-out { @include elr-fade('hide', .3s); }