[Share] Text Overlay on Blog Grid

Suppose you want to make text + overlay appear when users hover on a blog image on the Blog Basic Grid Page. You can follow these.

#1. Text overlay on All Blog Pages

Use this code to Custom CSS box.

/* Blog grid hover */
@media screen and (min-width:992px) {
.blog-basic-grid--text {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%,-50%);
    opacity: 0;
    transition: all 0.3s;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column !important;
}
article.blog-basic-grid--container.entry.blog-item.is-loaded {
    position: relative !important;
    transform: unset !important;
}
.blog-basic-grid article:hover .blog-basic-grid--text {
    opacity: 1;
    transition: all 0.3s;
}
.blog-basic-grid .image-wrapper:after {
    content: "";
    background-color: rgba(0,0,0,0.75);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.3s;
    pointer-events: none;
}
.blog-basic-grid article:hover .image-wrapper:after {
    opacity: 1;
}
a.blog-more-link {
    align-self: center !important;
}}

#2. Text overlay on Specific Blog Page

If you want to do this on a specific blog page. First, you can find Blog Page ID. Use below tool.

In my example, we will have: #collection-6677756d03a4f15ba27ce9d8

Next, use CSS code

/* Blog grid hover */
@media screen and (min-width:992px) {
#collection-6677756d03a4f15ba27ce9d8 {
.blog-basic-grid--text {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%,-50%);
    opacity: 0;
    transition: all 0.3s;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column !important;
}
article.blog-basic-grid--container.entry.blog-item.is-loaded {
    position: relative !important;
    transform: unset !important;
}
.blog-basic-grid article:hover .blog-basic-grid--text {
    opacity: 1;
    transition: all 0.3s;
}
.blog-basic-grid .image-wrapper:after {
    content: "";
    background-color: rgba(0,0,0,0.75);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.3s;
    pointer-events: none;
}
.blog-basic-grid article:hover .image-wrapper:after {
    opacity: 1;
}
a.blog-more-link {
    align-self: center !important;
}}}