[Resolved] Post titles on top of featured images in Archive pages

[Alexandra]

Hey guys!
Is there a way to have the h2 titles display centered on top of featured images in Archive pages instead of above or below?
I would also need a slight overlay on those featured images in order to properly display the titles in white.

Sample archive page

What I would need: http://prntscr.com/vhvssp

Thank you so much!

[David]

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

[Alexandra]

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

[Elvin]

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.

[Alexandra]

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!

[David]

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

[Alexandra]

That sealed the deal! 😀
Thank you so much, David!!

[David]

Glad we could be of help

[Author]

Posts