Center a Button Over Gallery Image

Hi! I have a grid gallery of images and want to add a button on top of them. I've tried different methods and have been really struggling with this. Right now, I have a gallery block and a button block. I've used css to change the position of the button so it appears on top of the gallery image I want. The problem is that the button is not responsive so the position is awkward when viewed on a mobile device. I'm wondering if there's a way to position the button relative to the gallery image? 

I've also tried displaying the image title on top of the image. The problem with this is the title isn't a clickable link. 

Here is the CSS I used to move the button:

Here is how it looks on a normal screen:

Here's how it looks on mobile:

Here is a link to my website: https://lion-wedge-b4fc.squarespace.com/usa The password is 12494

Can you setting to display image title? I will take a look, to see if i can change title to clickable button.

On 11/22/2019 at 6:04 PM, tuanphan said:

Can you setting to display image title? I will take a look, to see if i can change title to clickable button.

Yeah, I changed the CSS to display the image title over the thumbnail. Here's what it looks like:

The problem here is that the title isn't a clickable link. I'd like people to be able to click the title to be redirected. 

Thanks!