Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Mike Cave 24 posts 162 karma points
    Feb 14, 2018 @ 12:51
    Mike Cave
    0

    Create Image with text overlay and link on the fly

    Templates, (partial) views and macros
    Umbraco 7

    Hi guys,

    I am trying to create a set of images (3 to a row) using my umbraco field set. I am using archetype to gather the info. When I try to create a set of divs which overlays text onto my image I am using the relative/absolute method. Unfortunately when my text is out put it overlays in exactly the same place, instead of relative to each image div.

    Is there a standard way of creating tiles/images with overlay text on the fly?

    thanks

    Copy Link
  • Steve Morgan 1346 posts 4453 karma points c-trib
    Feb 14, 2018 @ 13:57
    Steve Morgan
    100

    Hi Mike,

    Sounds like you're having more of an issue with the HTML and CSS rather than Umbraco?

    If so I recommend just getting it working in plain old html first then add the CMS goodness.

    Take a look at this https://css-tricks.com/text-blocks-over-image/

    Should help. If it's about outputting the content then post your razor and I'm sure we can help.

    Steve

    Copy Link
  • Mike Cave 24 posts 162 karma points
    Feb 14, 2018 @ 15:44
    Mike Cave
    0

    Hi Steve,

    thanks for the info. My problem is when I apply normal rules (relative and absolute. the output text from umbraco all gets put into the same position. EG I get 3 columns of images (correct) but the output text for each field set is all in the same place. eg all in the ABSOLUTE position overlaid over each other.

    Copy Link
  • Steve Morgan 1346 posts 4453 karma points c-trib
    Feb 14, 2018 @ 16:06
    Steve Morgan
    0

    Hi Mike,

    Without seeing the code and CSS it's impossible to tell you what you're doing wrong.

    I think you need to view the source of the page and use the chrome developer tools to work out what's going wrong.

    HTH

    Steve

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft