Section/row layout/image overlay

[esridley96]

esridley96

January 18, 2024 at 2:01 pm

Hi Kadence-ers!

Coming in with a question I have been trying to resolve, on and off, for a couple of weeks. I do some web designing, and in designing a site for a good friend, we agreed to have his home page with portfolio projects be in the form of picture bars with a link to the project page. When hovered over, we want the pictures to be 50% opaque with the title of the project appearing over the middle picture, similar to this for example:

What I have currently is this (unhovered first, then hovered second):

Using this format for each linked row of pictures:

That is where my problem lies. I know the advanced Image Overlay block would solve this, but at this time the cost is a bit prohibitive just for one part of one website, although as I continue to grow, I will of course support Kadence by purchasing the Pro package down the road. In the meantime, I have tried many custom HTML/CSS combinations and even mixing up the Z-index of the elements to little avail; once I did get it to work using a suggestion from this forum, but somehow slowed the website down to a crawl just to load the home page. I am wondering if anyone has potential solutions for this with just the base Kadence Blocks: would I need to use a cover for the middle picture to add the text? Humbly hoping for some direction on what CSS to use and for which element. Any help would be so, so appreciated!

Cheers!