Place button on top of image in figure

[ariellevate]

Hi!
I am using the archive layout to create a design for my blog page, https://ariellevate.com/articles/ in my figure, and I have a button with a gradient hover effect. My question is, is there a possibility to place the button as an “overlay” on top of the blog post’s featured image? Z-index? Then cover the entire image with the button and the gradient hover? Or is there another way to create a hover overlay effect on the image?

Also one of the categories (recipes) is not showing on the live page but is showing inside the cornerstone editor. Why is this? Set it up the same way I set up the motivation category, which is showing without any difficulty. I noticed that it’s always the section with posts placed after the first (most recent posts) section. If I move another section up after this this happens to that section too. If I change the setting in loop consumer - items to “all” instead of “many-then enter - 6” they also show. But I only want to show 6 in the top section.

[prakash_s]

Hello @annekling,

Thanks for writing to us.

To place the button over the featured image on hover, I would suggest you please use the Effect module. I would suggest you follow these steps.

1. Add your featured image with the help of the Image element.
2. Under the Image element use insert the DIV element
3. Insert the Button element inside the DIV

Please have a look at the given screenshot for the element settings.

In order to check the category we need to check your settings but the given login details are not working. Please check and send us again.

Thanks

[ariellevate]

Hi, thanks for the response,
That didn’t work, the button doesn’t show at all when I put it inside the div. Not on hover and not when I set the opacity to full. It disappeared the second I put it inside the div. And when I add this below the image in the figure it only populates in one of the figures, not all of them like it did to the other looper elements inside the figure. And the button is showing how it did before under the image on the front end of the site.

I set the password for the user to be the same as in the secure note.

[tristup]

Hi @annekling,

I have followed the way suggested by my colleague and it worked, I just decrease the opacity of the image on interaction to make the background look like an overlay.

Thanks