Adding Text over Image without using a slider

[Breechay]

Hey Swift Team,

Just a quick question: What is the best way to add some arbitrary html text over an image without using a slider? I don’t want to use too many sliders because it’d slow dow down the site.

p.s The image is in a 1/2 width element. See website and image attached

Thank you,

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,

Please try to use the image banners http://dante.swiftideas.com/image-banners/ through shortcodes at page content editor. A swiftideas small icon at page editor to create the shortcode.

Thanks
Mohammad

[Breechay]

Awesome! Thank you Mohammad

Lastly, I’m having difficulty positioning the text. I tried to add a margin top to an H1 Class in the custom css section but that didn’t pan out how I wanted it to… do you have any suggestions?

Comments:
1. The text is too high up
2. The text cuts off on mobile devices

Also, how do I add a bar underneath the headline similar to the one in the image attached?

I feel like I’m all over the place, thank you!

Attachments:

You must be logged in to view attached files.

[Breechay]

One more thing, the hover animation on the button- how do I set it to none?

[Rui Guerreiro – SUPPORT]

Hi,

Can you provide the url of that page on the screenshot?
Thanks

-Rui

[Breechay]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

Add the code below to your custom css option

html.no-js .sf-animation.image-banner-content, .mobile-browser .sf-animation.image-banner-content, .apple-mobile-browser .sf-animation.image-banner-content, .sf-animation[data-animation="none"].image-banner-content {
    bottom: 20%!important;
}

This way it will be lower and in the mobile at least in my test wasn’t cut off.

-Rui

[Breechay]

Getting there,

The text is at “shoulder level” on the phone (see attached image 1) but too low on desktop. Is there another code I can use to alter each, mobile and desktop individually?

Edit: The hover animation is still showing

[David Martin – Support]

Hi,

You can change the vertical position with these:

Desktop

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

iPhone

@media only screen and (max-width: 767px) {
.home .sf-animation[data-animation="none"].image-banner-content {
    bottom: 20%!important;
}
}

Thanks,
David.