center title and post meta when mouseover featured image

Hi there,

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

Sorry,

it is unlocked now!

Thanks!

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

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!

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

Thank you so much, David! Everything perfect!

You're welcome. Site looks great :)

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

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.