Archived topic

Possible to Replicate Header on Index?

7 replies · Started by Sean on January 26, 2019

Viewing posts 1–8 of 8

January 26, 2019 at 11:19 am #793055

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]

January 26, 2019 at 4:06 pm #793202

Hi there,

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

Let me know :)

January 26, 2019 at 4:54 pm #793221

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.

January 26, 2019 at 6:04 pm #793261

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 :)

January 26, 2019 at 6:57 pm #793298

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).

January 27, 2019 at 7:55 am #793662

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

January 27, 2019 at 2:52 pm #793872

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!

January 27, 2019 at 3:11 pm #793881

Glad to hear you that. Good luck with choosing :)

This archived topic is closed to new replies.

Start building better websites today.