How can I add a button to Brine template image on hover?

Hello! I am using the Brine template. I've added image blocks to an index page.

Here is what I'm trying to achieve:When a user hovers over one of the images, I would like an outline style button to show that reads VIEW PROJECT, so that they can click it to view more details about the project.

Additionally, I have been trying to change the layout-caption-overlay-hover style so that it covers the entire image. I'm able to affect the color, but not the height of the caption itself.

Has anyone solved for these issues / can anyone help?

Here is what I was trying to use to increase the height of the caption to fill the full image, but it didn't work.

.image-block-outer-wrapper.layout-caption-overlay-hover .image-caption-wrapper { background: rgba(245,242,239,.97) !important; box-shadow: 0 2px 4px 0 rgba(51,51,51,.07) !important; max-height: 100% !important;}

Here is the URL of my site: http://cleverelk.com/

Updates:

I managed to create the image hover overlay and button outline effect.

But I'm still struggling with two things:

1) How to change the button background and text color on hover2) How to add a link to the button I've created with CSS

Can anyone point me in the right direction?

Here is the code I used for the overlay:

.image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper { min-height: 100%; text-align: center; padding-top: 50% !important; background: rgba(245,242,239,.98) !important; box-shadow: 0 2px 4px 0 rgba(51,51,51,.07); transition: opacity .1s ease-out;}

Here is the code I used for the button, but unfortunately it is not yet a link:.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .image-caption-wrapper p { font-family: proxima-nova; font-size: 16px; font-weight: 400; letter-spacing: .15em; text-transform: uppercase; text-align: center; text-decoration: none !important; border: 2px solid #A39841 !important; color: #1d1d1d !important; padding: 20px 40px !important;}.sqs-block-image .image-caption p { display: inline !important;}