Text and/or scroll bottom anchor over featured image?

Hi,

Is it possible to add overlaid text, buttons or scroll anchors over featured images on blog posts, using a bit of clever CSS?

I’m using the Events Manager plugin which uses posts to create events, and I’d like to add some text over the featured image to make it more attractive. Here’s an example of an Event Manager post:

(Since posting I have figured out the basics of how to overlay the title, but more options would be good)

Many thanks!

Hi,

Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

Hi Paul

Thanks for your reply. Actually this support has been offered previously on these forums:

I am simply looking for some more customisation options, for example adding a scroll bottom anchor icon. Thanks again in advance for any help you can offer.

Hi There,

This customization would be out of the scope of our support BUT I have an awesome solution for you.

Someone has already thought of that and made some custom code that looks really good. Please take a look.

Hope it helps

Hi Joao,

Wow, that is indeed awesome. I will set it up on my staging site and try it out!

Many thanks,

Michael

You’re welcome, Michael.

Hi Joao,

I was wondering if you could help a little more with this. I’m trying to figure out how Ben Ryan achieved the styling on the width and look of his blog text:

I studied his CSS, but I couldn’t figure out how he achieved this.

I’ve tried various styling approaches, but they invariably affect the alignment of the caption text over the featured image. The only way I’ve been able to style the width and look of my blog text is by applying the following css:

.single .entry-wrap {
background-color: transparent;
box-shadow: none;
padding: 10px 18%;
}

Am I taking the right approach here? I’m applying this on a staging site, so you’ll need to login to take a look:

http://www.andrewcohen.org/materialism-wound/

Many thanks!

Hi There

You need to follow the instructions given on the post https://benryan.com.au/gradient-overlay/

Hope it helps

Hi Joao,

Apologies, perhaps I didn’t make myself clear. I’m not talking about the styling for the gradient, the parallax featured image, or the caption overlay.

I’m talking about the styling for the blog itself - the layout of the text underneath the featured image. Ben Ryan seems to have overridden the default styling for the stack he is using, and I wanted to get your support on how he did this, and the best way to achieve this with Integrity.

So far the only way I’ve been able to style the layout of my blog text without adversely affecting the caption text over the parallax image is by applying the following css:

.single .entry-wrap {
background-color: transparent;
box-shadow: none;
padding: 10px 18%;
}

Please see the above post for details of how you can take a look at my staging site. The problem is that the styling of the blog text is not exactly as I want it, particularly on mobile devices.

Please compare my results to those on this page of Ben’s site:

Many thanks!

Hi There,

I am sorry but I still don’t get what is your goal, can you provide a screenshot to clarify? Thanks!

Hi Michael,
Would you mind sharing your title overlay css for the Events Manager posts?
Would really appreciate it!

Thanks!
N

Hi There,

I have checked this is his overlay: https://screencast-o-matic.com/watch/cblhfx2guT
In your case that might be different but feel free to inspect the element and adjust accordingly.

Yes @Lely, that shows the css styling I used. It was based on the link posted above which now seems to be dead.

However, please note that this code seems to interact with Event Manager’s location functionality. If your event has no location (an online event for example) for some reason the post text for the event does not publish.

If anyone has a clue as to why this interaction occurs, I’d be very grateful!

Hi there,

Kindly open up a separate thread for the case you have mentioned regarding the events without location and our support team will do their best to help you within the scope of our support.

Regarding the Events plugins I strongly suggest that customers use the Modern Event Calendar as it is bundled with our theme:

Thank you.

Glad you like :slight_smile:

Hey Joao,

The gradient post was actually created using the Pro page builder

Let me know if you need anymore info.

Always happy to assist

Ben

Hi there,

I am not sure what is the context of your reply. If you need assistance from the staff about a problem we will be happy to help. Please open up a separate thread and we will follow up.

Thank you.