jonnybarnes.uk/resources/sass/_hovercard.scss

//hovercard.scss

.mini-h-card {
    position: relative;
}

.mini-h-card .p-name {
    position: relative;
}

.mini-h-card:hover .p-name {
    z-index: 100;
}

.hovercard {
    position: absolute;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    background: white;
    width: 30rem;
    left: -10px;
    top: -10px;
    z-index: 50;
    padding: 2rem 1rem 1rem;
    border-radius: 2px;
    box-shadow: 3px 3px 2px 1px hsla(190, 11%, 7%, 1);
    display: none;
}

.mini-h-card:hover .hovercard {
    display: flex;
}

.mini-h-card .social-icon {
    width: auto;
    height: 2rem;
}

.mini-h-card .u-photo {
    height: 10rem;
}