[Support request] center title and post meta when mouseover featured image

[Iván]

Hi, Tom!

In my blog page (and blog categories pages) I would like to see the post title and category inside the featured image when I mouseover the image. I found some instructions here https://generatepress.com/forums/topic/mouseover-blog-efect/#post-528215

It works, but I would like to know:

– How can I center the title and meta in the image, horizontally and vertically?
– How can I see the title AND the meta (categories) below the title?
– How can I turn the image white when mouseover it?

THANK YOU SO MUCH!!

[Leo]

Hi there,

Can you unlock your site so we can see what you have so far?

[Iván]

Sorry,

it is unlocked now!

Thanks!

[David]

Hi there,

try this CSS for position entry-header and meta and performing the hover effects:

.generate-columns .inside-article {
    display: grid;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
}
.generate-columns-container .inside-article > * {
    grid-column: 1;
    grid-row: 1;
}
.generate-columns-container .inside-article > * {
    -webkit-transition: 0.35s ease;
    transition: 0.35s ease;
}

.generate-columns-container .inside-article:not(:hover) .entry-header, .generate-columns-container .inside-article:not(:hover) .entry-meta  {
    opacity: 0;
    -webkit-transition: 0.35s ease;
    transition: 0.35s ease;
}

.generate-columns-container .inside-article:hover .post-image {
    opacity: 0;
}
.generate-columns-container .inside-article .entry-meta {
    padding-top: 6em;
}
.generate-columns-container .inside-article .post-image {
    margin-bottom: 0;
}

[Iván]

It worked perfectly, David! You are a genius!

Only 2 little “problems”:

– I would like the pading between rows to be 40px, as it is between columns.
– When the Post title has 2 lines instead of 1 (in tablet mode, for example), the tags are veeery close to the title; ¿it is possible to increase the padding between them?

Thank you very much!

[David]

I adjusted the code above to increase the entry-meta top padding, and removed the bottom margin from the image so row gaps should be good

[Iván]

Thank you so much, David! Everything perfect!

[David]

You’re welcome. Site looks great 🙂

[Samuel]

I don’t quite get it. What can I do to make it look like this: https://baubeaver.de/ (please check below)

[Tom]

The code David provided looks like it should work with our columns feature. Is that what you’re using?

WPSP Pro has cards that do this now as well.

[Author]

Posts