[Resolved] Possible to Replicate Header on Index?

[Sean]

I think this is asking for a bit much, but I wanted to throw it out there anyway…

A) Is there a way to replicate the Page Header/Element Header I have for my post as the post excerpt on the blog index pages? (Featured image with black tint overlay, with white text on top)

B) If there’s no way to automate that, is there a way to do the following:
[list]1. Have the featured image only on the blog/category/search/archive/index display in black & white, and turn to color when it’s being hovered over? (preferably a smooth transition)

2. Is there a way to move the “read more” button to the right instead of the left side?

3. I used the following thread as reference, but is there a way to get rid of the author info? Also, can I place the date on the line after the category?[/list]

[Leo]

Hi there,

Does something like this help?
https://docs.generatepress.com/article/page-hero-examples/#example-4

Let me know 🙂

[Sean]

Not quite, unless I’m missing something.

I currently use what you are referencing here: https://yopotato.com/wwe/nxt-takeover-phoenix/
So that’s an example of a post.

But on the blog index, I can’t find a way to replicate it to look the same for each article: https://yopotato.com/

So essentially, I would like that page header from the post, to be the excerpt on the index page for each article. I hope this makes sense.

[Tom]

It’s not do-able using Elements, but you can try some custom CSS:

.post-image {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin-bottom: 0 !important;
}

.blog .inside-article,
.archive .inside-article {
    position: relative;
    padding: 80px;
}

.inside-article > *:not(.post-image) {
    z-index: 10;
    position: relative;
}

.post-image img {
    object-fit: cover;
    height: 100%;
}

.post-image:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    background: rgba(0,0,0,0.5);
}

Let me know 🙂

[Sean]

And just like that.. Hot dang. I added the rounded corners to go with the look I’m aiming for.

Is there a way to move the “read more” button to the right side? Figured it out with the following:

.read-more.button {
    float: right;
}

I thought I figured it out using the CSS above, but it’s sticking out awkwardly from the container..

And for science sake(I’m going to compare and see what I prefer), is there a way to do the black & white hover effect for the featured image(but only on the blog index pages).

[David]

Hi there,

for the button alignment:

.read-more-container {
    text-align: right;
}

Try this as your base for the greyscale hover.

.post .post-image:hover {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

[Sean]

I just realized my original code for the B&W works with it either way haha. But dang, all I was really missing was -container originally. Good catch!

Well, I’m pretty dang satisfied with the outcome now. I did the tweaking to make it more how I want it and I’m really torn on which I’ll go with.

Regardless, I appreciate the help fellas!

[David]

Glad to hear you that. Good luck with choosing 🙂

[Author]

Posts