Overlay Button to Image Element on Page

[racheldeters]

Hello,

I have created my front page with a variety of themed images and I would love to be able to overlay buttons saying “Shop Now” on each image. Is there any custom CSS to use with the Button element or any other solutions?

Thanks!
Rachel

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

If you use the image banner asset you can add a caption, therefore you can just add the button shortcode to the caption

– Kyle

[racheldeters]

Figured it out. Thanks!

[Kyle – SUPPORT]

No problem

[racheldeters]

Is there an easier way to position a button than adjusting the padding? I’ve found that once I do that when I load my page it shows the button positioned incorrectly for a second and then it goes the correct position.

Thanks!
Rachel

[Kyle – SUPPORT]

Try this:

.image-banner-content.content-right {
    width: 100%;
}
.spb_image_banner.home1 {
    position: relative;
}
.home1 a.sf-button {
    position: absolute;
    right: 50px;
    bottom: 50px;
}

You will need to add the extra class ‘home1’ to the image banner

– Kyle

[racheldeters]

So it moved the button to the right, but not down (see attached screenshot). Is there a portion of the code that control the downward positioning?

Thanks!
Rachel

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

In the Image Banner Options you have the content position set to centre, set it to bottom

– Kyle

[racheldeters]

I only have the option to choose left, right, or center. There is no bottom option.

[Kyle – SUPPORT]

Try adding this to your custom css:

.image-banner-content.sf-animation.sf-animate[data-animation="none"] {
  bottom: 0 !important;
}

– Kyle

[racheldeters]

The position is now correct, but it still does that loading in the wrong position then shifts down to the correct position.

If you load http://www.etsycurated.com you’ll see what I mean. Not sure if this is solvable?

Thanks!
Rachel

[Kyle – SUPPORT]

Hmm yeah unfortunately not, it’s because the initial position is set inline, and then when the css is loaded is changes position.

Sorry about that

– Kyle