[Resolved] Adding Cool Effects to Featured Image on Home Page

[Muhammad Qasim]

Hello Awesome developers of awesome theme,

I would like my blog homepage to look similar like this one: https://paste.pics/ee2b2ea63eac27510b1f77

To explain, I want the featured image and the hover effect like that, as well as would like it to be clean without borders. (Ignore the meta data please)

Thanks.

[Tom]

Hi there,

The image doesn’t seem to be loading. Can you double-check?

Let me know 🙂

[Muhammad Qasim]

Hello Tom,

Sorry for that. Please check this: https://pasteboard.co/IVMWSoh.jpg

[David]

Hi there,

in Customizer > Layout > Blog –> Featured Image > Archive – Uncheck: Display Padding around Featured Images.

Then add this CSS:

.generate-columns .inside-article {
    background-color: transparent;
}

.generate-columns .inside-article .post-image img {
    box-shadow: 0 0 40px 0 rgba(0,0,0,0);
    transition: box-shadow 0.3s ease-in-out;
}
.generate-columns .inside-article:hover .post-image img {
    box-shadow: 0 0 40px 0 rgba(0,0,0,0.3);
}

[Muhammad Qasim]

Dear David,

Thanks a lot, it worked perfectly.

Few more things:

I would like to change the font-size and weight of H2 on homepage only, if I do in customizer, it does for all blog. What would be CSS for that?

Secondly, I want the images on homepage to have rounder corners, what would be CSS for that? thanks!

[Tom]

Hi there,

Go to Customize > Typography > Headings and look for the “Archive Content Title (H2)” option.

Looks like you already figured out the rounded images 🙂

[Muhammad Qasim]

Hello Tom,

Thanks, got it and solved.

Yes, that rounded corner was pretty basic, my bad I didn’t google it before.

Thanks for the great support, been using GeneratePress premium for over 2 years and never regretted my decision (Y) 5/5

[Muhammad Qasim]

SOLVED

[Tom]

Glad we could help! 🙂

[Author]

Posts