Avada Forums Community Forum Overlay Text On An Inline Image?

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • bvallance
    Participant
    Post count: 4

    I’m trying to understand how to overlay text on top of an inline image (the ‘img’ element, not a background image). I don’t see a native Avada 7.0.2 element that can do this. Did I miss something?

    If the solution requires HTML and CSS I’m fairly adept at both. I know how to add a class and CSS code where those options are present in the global Avada options and for individual Avada pages. I also know how to add code to the functions.php in my Avada child theme (I’m using the Avada Child Theme, not the parent Avada theme). I’m assuming that if I have to add HTML that I would do that using a hook in the functions.php file, correct? If I need to add HTML would you please tell me where to add the HTML code, in addition to answering the question about overlaping text on an inline image? I know how to add the CSS code to the style.css stylesheet in my Avada Child Theme.

    Thanks In Advance For Your Help!

    ZW
    Participant
    Post count: 4

    Background or in-line image, you could create a text element beneath the image and simply use negative margins (-12% to -30% margin-top should do it, depending on font-size and its padding).

    On Avada, it may not respond well on mobile though… because depending on how you lay it out, it may stack multiple images and then stack the text fields.

    ZW
    Participant
    Post count: 4

    Working on this myself. Use nested columns if you’re laying out multiple images and text. That should mostly fix the responsiveness to mobile.

    marklchaves
    Participant
    Post count: 873

    Hi everyone,

    Here’s a live example of one way to do this.

    https://codepen.io/marklchaves/pen/GRKVqqG

    Thanks!

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.