.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    border-radius: 5px;
    cursor: pointer;
    transition: .5s all ease-in-out;
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.card img {
    border-radius: 5px 5px 0 0;
    width: 100%;
}

.card-container {
    padding: 2px 16px;
}

.show-on-hover {
    visibility: hidden;
    position: absolute;
    opacity: 0.9;
    word-break: break-word;
    width: 100%;
    height: 101%;
    text-align: center;
    padding: 5px;
    transition: .3s all ease-in-out;
}

.card:hover .show-on-hover {
    visibility: visible;
    z-index: 9;
    background: white;
}

.relative {
    position: relative;
}