Create Image with text overlay and link on the fly
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 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.
Create Image with text overlay and link on the fly
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
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
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.
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
is working on a reply...