Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


evkastner

Question

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/

Edited by evkastner
Initial Revision
Link to comment
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

3 answers to this question

Recommended Posts

  • 0

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?

Link to comment
  • 0

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;}

Link to comment
  • 0

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;}

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...