Want to add hover effects to Featured Image

Hi there,

Do you have GB pro? If so, you can use the opacity settings under the effect tab.

If not, try the below CSS:

.gb-query-loop-item.is-loop-template-item .gb-block-image:hover img{
    opacity: 0.3;
}
.gb-query-loop-item.is-loop-template-item .gb-block-image {
    background-color: #000;
}

.gb-query-loop-item.is-loop-template-item .gb-block-image img {
    transition: all 0.3s ease;
}

I use free plugin.

It's working perfectly on my mentioned page only. how can I do this for other pages also or the whole site?

Hi Sabbir,

Can you try adding this in Appearance > Customize > Additional CSS:

:is(.archive, .blog) .post .inside-article .post-image:hover img {
    opacity: 0.3;
}

:is(.archive, .blog) .post .inside-article .post-image {
    background-color: #000;
    height: 200px;
}

:is(.archive, .blog) .post .inside-article .post-image img {
    transition: all 0.3s ease;
}

Thanks Fernando,

this is working for GP default archive pages.

I need it for GB Blocks.

Can you provide the link where I can view these GB Blocks?

Home page not working ( Ying Code)

category pages are working with Ying Code:

Different structures require different codes most of the time. Try adding this CSS:

.home .gb-query-loop-item .gb-block-image:hover img {
    opacity: 0.3;
}

.home .gb-query-loop-item .gb-block-image {
    background-color: #000;
}

.home .gb-query-loop-item .gb-block-image img {
    transition: all 0.3s ease;
}

This should work for the homepage.

Thanks, Fernando.

It's working fine

You're welcome Sabbir!