[Resolved] Post title overlay + slide up

[Greg]

Hi team GP,

I realise this goes above and beyond what could usually be expected of a support team/forum, but I know there’s a lot more knowledgable people than me on here, so hoping someone might point me in the right direction.

I’m using WPSP to create a 2×2 grid of recent case studies on a homepage. I would like to display the post title, then have the excerpt slide into view on hover (pushing the title up with it). Using one of the preset card styles and adding custom CSS I’ve got the excerpt sliding up part sorted. But I’m totally lost on animating the title at the same time, and whether it’s even possible.

I initially tried with query loop, but soon realised I might go crazy before making progress! So short-term I’ll be using WPSP and look to update when I have more experience with query loop.

I’ve added an image preview and notes on the private URL, hope this helps to explain.

Thanks for any tips you can give.
Greg

[Fernando]

Hi Greg,

To clarify, are you wanting the hover effect you already have on the GB Query Loop as well?

[Greg]

Hi Fernando,

Thanks for your reply. And, no, I’m wanting to alter the hover effect I have on the WP Show Posts list on the homepage. I would like to be able to have it so the posts just show the post title until you hover over. Then, the post title slides up as the excerpt comes into view.

Hopefully that explains it better?

Thanks,
Greg

[David]

Hi there,

the tricky part with sliding things up is knowing the height of the thing you want to slide. Which can be a pain when it comes to variable content. So the better method would be to use max-height to show hide the excerpt.

Heres a GB Query Loop i built ( paste the code into the Code Editor view ):

<!-- wp:generateblocks/container {"uniqueId":"5b0deaa4","innerContainer":"full","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/query-loop {"uniqueId":"f82bd006","query":{"post_type":"post","per_page":"2"}} -->
<!-- wp:generateblocks/grid {"uniqueId":"376295be","columns":1,"isDynamic":true,"blockVersion":2,"isQueryLoop":true,"lock":{"remove":true}} -->
<!-- wp:generateblocks/container {"uniqueId":"862e60e3","isGrid":true,"isQueryLoopItem":true,"gridId":"376295be","width":50,"minHeight":400,"paddingTop":"20","paddingRight":"20","paddingBottom":"20","paddingLeft":"20","paddingSyncUnits":true,"textColor":"var(\u002d\u002dbase-3)","bgImageInline":true,"verticalAlignment":"flex-end","isDynamic":true,"blockVersion":2,"useDynamicData":true,"dynamicContentType":"featured-image","lock":{"remove":true,"move":true},"className":"reveal-container","transforms":[{"type":"","state":"normal","target":"self"}]} -->
<!-- wp:generateblocks/headline {"uniqueId":"94ad2aae","fontSize":24,"useDynamicData":true,"dynamicContentType":"post-title"} -->
<h2 class="gb-headline gb-headline-94ad2aae gb-headline-text">Title</h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"b11d28f1","element":"div","fontSize":18,"useDynamicData":true,"dynamicContentType":"post-excerpt","useDefaultMoreLink":false,"excerptLength":20,"className":"reveal-content"} -->
<div class="gb-headline gb-headline-b11d28f1 gb-headline-text reveal-content">Title</div>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/query-loop -->
<!-- /wp:generateblocks/container -->

and here is the CSS:

.reveal-container .reveal-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.5s ease-in;
}
.reveal-container:hover .reveal-content {
	max-height: 400px;
}

The Post Template container in the Query Loop has a minimum height set and its vertical alignment set to bottom. And it has the Advanced > Additional CSS Class of: reveal-container
And the Headline block showing the Excerpt has the reveal-content class.

The Query Loop is set to show the 2 latest Posts.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Greg]

Thanks so much, David, that’s really useful.

Can you tell me how I can go about editing the title tags, so for example if I wanted the following classes applied?

<h4 class="case-study-title">Title</h4>
<div class="reveal-content case-study-excerpt">Title</div>

I tried modifying the code, and clearing my cache, but I’m still seeing the original classes applied (h2, gb-headline, etc).

Is there an easy way to handle the columns on mobile too, as I noticed it maintains the 50:50 column split on smaller screens at the moment. Ideally I would like this to switch to a single column with the posts stacked like WPSP.

And, finally, is there a PayPal ‘buy us a coffee/beer’ link I can use? Because I know this is above and beyond regular theme support.

Thanks again,
Greg

[Greg]

I’ve made some progress, rebuilt it using Query Loop and have managed to set it to calculate the min-height based on the 16:9 aspect ratio of my images (pretty chuffed with that bit!):

.case-study-image {
    background-size: cover;
    min-height: calc(50vw / 1.78);
}
@media (max-width: 768px) {
    .case-study-image {
    	background-size: cover;
    	min-height: calc(100vw / 1.78);
	}
}

Now just need to work out how to bring your reveal content trick back into action, then figure out if there’s anyway of applying a gradient overlay on hover 🙂

Greg

[Greg]

Reveal content and container back in action 🙂 your query loop code makes sense to me now.

I’ve also got the gradient on hover, I just can’t get my head around z-index on a pseudo element to get it positioned beneath the text. Any pointers greatly appreciated!

Thanks,
Greg

[Fernando]

You may add classes in the Advanced section of the Block’s settings.

With regards to responsiveness, there should be a reponsive view button in the Block settings. Then, you can alter the width of the Post template as such: https://share.getcloudapp.com/Kou1e6lr

Here’s our link with regards to tips: https://generatepress.com/ongoing-development/ 🙂

As for the overlay, you basically need to apply the overlay to the Container holding the text as opposed to the container link. Try this CSS:

.case-study-image:hover > .gb-inside-container:after {
    content: "";
    background-image: linear-gradient(180deg, rgba(26, 45, 56, 0) 0%, rgba(26, 45, 56, 0.8) 100%);
    /*     background-color: black; */
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
}

.case-study-image {
    position: relative;
}

.case-study-image > .gb-inside-container {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

[Greg]

Thanks Fernando, your CSS has fixed the overlay issue 🙂

The only small issue is it’s moved the title back to the top of the image, is there an easy way for me to move it back to the bottom?

Thanks,
Greg

[Fernando]

Can you re-share the link to where you’re implementing this? The previous link provided seems to no longer work.

[Greg]

Sorry about that, please try it now?

Thanks,
Greg

[David]

Can you remove the CSS Fernando provided here:

https://generatepress.com/forums/topic/post-title-overlay-slide-up/#post-2336459

So i can take a closer look ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Greg]

Yes of course, now removed and switched back to what I had.

Thanks,
Greg

[David]

Remove this:

.case-study-image a:hover:after {
    content: "";
    background-image: linear-gradient(180deg, rgba(26, 45, 56, 0) 0%, rgba(26, 45, 56, 0.8) 100%);
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

And try this:

.case-study-image:after {
    content: "";
    background-image: linear-gradient(180deg, rgba(26, 45, 56, 0) 0%, rgba(26, 45, 56, 0.8) 100%);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    opacity: 0;
    transition: opacity 0.15s ease-in;
}

.case-study-image:hover:after {
    opacity: 1;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Greg]

Perfect, that’s exactly what I was after. Thanks!

Do you guys have a PayPal ‘buy us a coffee/beer’ link I can use to send a small thank-you?

Greg

[Author]

Posts