Post titles on top of featured images in Archive pages

Hi there,

try this CSS:

.generate-columns .inside-article {
    position: relative;
}
.generate-columns .post-image+.entry-header {
    position: absolute;
    top: 50%;
    left: 0;
}
.generate-columns .post-image+.entry-header a {
    color: #fff;
}

Hi, David!
Thank you so much for the CSS!
I've tried it and this is the result: https://alex.bandiwork.dev/category/articole-diverse

The titles were not vertically aligned center, so I tried adding

h2.entry-title {
	text-align: center;
	}

but it seems to align only titles with multiple rows. The titles that are short enough to fit on just one row are aligned left.

I would also need an overlay on the images, because the text is not readable without it.

If you have any ideas, please let me know.
Thank you so much!

Alexandra

Hi,

You can add overlay to your post images by adding this CSS:

.post-image {
    position: relative;
}
.post-image:before {
    background-color: rgba(25,25,25,0.5);
    height: 100%;
    width: 100%;
    content: "";
    display: block;
    position: absolute;
}
.post-image a {
    line-height: 0px;
    display: block;
}

Adjust the background-color: to your preference.

Hi Elvin!
Thank you so much for the overlay CSS! I got it to work! :)

The only issue remaining is the alignment of one-row titles.
Please see here: https://alex.bandiwork.dev/category/articole-diverse
Only titles with multiple rows are aligned center. The titles that are short enough to fit on just one row are aligned left.

Is there any way to fix that too? I would need all titles to be aligned center, if possible.
Thank you so much!

Change this CSS:

.generate-columns .post-image+.entry-header {
    position: absolute;
    top: 50%;
    left: 0;
}

to:

.generate-columns .post-image + .entry-header {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    padding: 0 10px;
}

That sealed the deal! :D
Thank you so much, David!!

Glad we could be of help