Buy me a coffee

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. 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;
}}

Text Overlay On Blog Grid 01 Min

#2. 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

Text Overlay On Blog Grid 02 Min

Next, use this 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;
}}}

Text Overlay On Blog Grid 03 Min