.blog-thumbnail-image:hover .blog-title-wrapper.forefront,
.blog-thumbnail-image:focus .blog-title-wrapper.forefront {
    opacity: 0;
}

.blog-thumbnail-image:hover .blog-title-wrapper.background,
.blog-thumbnail-image:focus .blog-title-wrapper.background {
    opacity: 1;
}

.blog-meta,
.blog-title-wrapper {
    padding: 0.75em;
    color: #ffffff;
    z-index: 1;
}

.blog-title-wrapper p,
.blog-title-wrapper h3 {
    color: #ffffff;
}

.blog-meta {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.blog-title-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    text-align: center;
    transform: translate(-50%, -50%);
}

.blog-title-wrapper.forefront,
.blog-title-wrapper.background {
    transition: opacity .6s ease;
}

.blog-title-wrapper.forefront {
    opacity: 1;
}

.blog-title-wrapper.background {
    opacity: 0;
}