[Resolved] Want to add hover effects to Featured Image

[Sabbir]

Hi,

I want to add Featured Image hover effects to Featured Image like this site https://www.adventureinyou.com/blogging/), how can I do this?

[Ying]

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

[Sabbir]

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?

[Fernando]

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

[Sabbir]

Thanks Fernando,

this is working for GP default archive pages.

I need it for GB Blocks.

[Fernando]

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

[Sabbir]

Home page not working ( Ying Code)

category pages are working with Ying Code:

[Fernando]

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.

[Sabbir]

Thanks, Fernando.

It’s working fine

[Fernando]

You’re welcome Sabbir!

[Author]

Posts