[Support request] Want to show title on feature image in simple show post in Dispatch layout

[impro1]

Hi,

I am trying to create a Simple WP Show Post List with 3 COL and want to just display the feature Image and the Post title.
I want to display the post title NOT Above or Below the image, but on top of the image (like a overlay, centered in 2 lines).
My image width will be about 260px and height 173px.

Here is a screenshot of how it looks and what I want:

View post on imgur.com

Basically, I want like the Dispatch layout “More Articles” section but with 3 columns:
https://generatepress.com/site-library/
I created my own show post list but can not adjust the location of my title.
Also, what is “Offset” setting does under More settings of a WP show post? Mine is set to 4 like the ‘Simple” list of Dispatch.

[Ying]

Hi there,

Try to follow the steps below:

1. Set your WP show post list like this:
https://www.screencast.com/t/p3RjYnvW

2. Add this CSS to move the title on to the featured image.

.wp-show-posts-inner {
    position: relative;
}

h2.wp-show-posts-entry-title {
    position: absolute;
    z-index: 99;
    top: 40%; /*adjust this number depends on your needs*/
    left: 50%;/*adjust this number depends on your needs*/
    transform: translateX(-50%);
}

The number you entered in offset box is how many posts you’d like to skip over.
Let’s say you have A.B.C.D 4 posts would normally show in this WP show post list, if you enter 1, then A will not show, only BCD will show, if you enter 2, only AB won’t show, only CD will show.

Let me know how it works 🙂

Please post WP Show Posts related question in its own support forum in the future, thanks for your cooperation!
https://wordpress.org/support/plugin/wp-show-posts/

[impro1]

Thanks a lot @Ying for the quick solution.
Few things:
1. This h2.wp-show-posts-entry-title H2 css affects all H2 title in my cover page using Show post lists ( Align, Sidebar etc.).

View post on imgur.com

I want this H2 title to show only the list I created (wp_show_posts id=”1714″).
Not for the Align List or other Lists like Sidebar.
2. Also, I tried to add a background overlay with 70% transparency:
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);

How do I extend the background strip the entire width of the image width?

[Ying]

Add one more selector for the CSS should work:

#wpsp-1714 .wp-show-posts-inner {
    position: relative;
}

#wpsp-1714 h2.wp-show-posts-entry-title {
    position: absolute;
    z-index: 99;
    top: 40%; /*adjust this number depends on your needs*/
    left: 50%;/*adjust this number depends on your needs*/
    transform: translateX(-50%);
}

For the overlay effect, try this:

#wpsp-1714 .wp-show-posts-image img{
    opacity:0.7;	
}
#wpsp-1714 .wp-show-posts-image{
    background-color: #000;
}

Let me know 🙂

[impro1]

Ok, working great for the CSS of just this list ID wpsp-1714
Other Lists are not affected.

But the overlay css is not working.
Any further tweak I can try?
I want the overlay just under the Title, like a stripe. Not the whole image as transparent (70%).
Thanks for your prompt solution 🙂

[Ying]

Ah I see, sorry misunderstanding 😛

Try this CSS instead:

#wpsp-1714 .wp-show-posts-entry-title {
    position: absolute;
    z-index: 99;
    top: 40%;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    padding-left:40%;
    width:100%;
}

Let me know.

[impro1]

This is great! I really appreciate your help and prompt solutions!! 5* 🙂

I also wanted to align my H2 vertically aligned. So I ended up using FlexBox as suggested by Tom:
https://generatepress.com/forums/topic/how-to-vertically-center-a-single-div/#post-203559

———FINAL CSS using CSS suggested by Ying & Using FlexBox css ——–
#wpsp-1714 .wp-show-posts-inner {
position: relative;
display: flex;
align-items: center;
}

#wpsp-1714 h2.wp-show-posts-entry-title {
font-size: 16px;
position: absolute;
z-index: 99;
left: 50%;/*adjust this number depends on your needs*/
transform: translateX(-50%);
}
#wpsp-1714 .wp-show-posts-entry-title {
height: 50px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: absolute;
z-index: 99;
top: 60%;
background: rgb(0, 0, 0);
background: rgba(0,0,0,.7);
width:100%;
}
———–
Here is the screenshot

View post on imgur.com

[Ying]

Good job, glad you achieved what you were looking for 🙂

[Author]

Posts