[Resolved] Title inside the image as Dispatch

[Juan]

Hello, I would like to know how I can make the title of the post appear inside the cluster image, as seen in the Dispatch demo. I also want to use the same hover effect. Thanks in advance.

[img]https://i.imgur.com/LPGS8zR.jpg[/img]

[David]

Hi there,

really quite complex to do this on a live site. These are the steps required:

1. The WP Show Post list has to be set with the Image above the title.

2. Create 2 x Hook Elements:
https://docs.generatepress.com/article/hooks-element-overview/

2.1 Hook #1
Content:

<div class="wpsp-content-wrap">
<!-- Openeing wrapper -->

Note: the editor will automatically add a close </div> this must be removed.
Hook: Custom Hook = wpsp_before_header
Display Rules: Entire Site or only those pages where you’re using the WP Show Posts

2.2 Hook #2
Content:

<!-- Close WPSP Wrapper -->
</div>

Hook: Custom Hook = wpsp_after_content
Display Rules: Same as Hook #1.

3. Add this CSS:

.wpsp-card,
.wpsp-card a,
.wpsp-card .wp-show-posts-meta a,
.wpsp-card .wp-show-posts-meta a:visited {
    color: #fff;
}

.wpsp-card .wp-show-posts-meta a,
.wpsp-card .wp-show-posts-meta a:visited {
    font-size: 1em;
    font-weight: 500;
    text-transform: uppercase;
}

:not(.widget).wpsp-card .wp-show-posts article,
.wpsp-card .wp-show-posts-image {
    margin-bottom: 0 !important;
}

.wpsp-card .wp-show-posts-inner {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.wpsp-card .wpsp-content-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5% 8%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.35);
    background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(80, 50, 50, 0.5)), to(rgba(0, 0, 0, 0)));
    background: linear-gradient(0deg, rgba(80, 50, 50, 0.5) 30%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

.wpsp-card article {
    position: relative;
    overflow: hidden;
}

.wpsp-card article,
.wpsp-card article .wp-show-posts-image img {
    -webkit-backface-visibility: hidden;
    -webkit-transition: 0.3s all ease;
    transition: 0.3s all ease;
}

.wpsp-card article:hover .wp-show-posts-image img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: 0.3s all ease;
    transition: 0.3s all ease;
}

4. When adding the WPSP shortcodes it needs to wrapped in a DIV like so:

<div class="wpsp-card">[wp_show_posts id="1471"]</div>

Alternatively the Pro version of WP Show Posts in the Beta version has Card options built in to do this.

[Juan]

Hi, David.

It works perfectly 🙂

But I need to make the image a little darker so that the white text has more contrast.

How should I modify the CSS?

[David]

You would need to edit the background properties in this part of the CSS:

.wpsp-card .wpsp-content-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5% 8%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.35);
    background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(80, 50, 50, 0.5)), to(rgba(0, 0, 0, 0)));
    background: linear-gradient(0deg, rgba(80, 50, 50, 0.5) 30%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

Use this site to create a different gradient it will provide you with the necessary CSS:

https://cssgradient.io

[Juan]

Thanks David, always so kind.

[David]

Glad to be of help.

[Author]

Posts