Streaming live at 10am (PST)

Transparent Div Block Over Photo


#1

What is the best way to create a transparent div block with text in front of (over) a photo? I tried simply creating a div block with text then using negative values to move the div block up over the photo. It worked fine in the designer and in the Webflow published website, but when I exported the code, I discovered that although the div block and text are rendered as expected in Chrome and IE, they are not where it should be in Safari. In my case, it appears much higher on the photo and ruins the design. Is there another, better way to create this effect? I have screen shots of the discrepancy if that would be helpful. Thanks!


#2

Hejsan @Bill616 !

In this case, I'd use position: absolute and relative to get this work well.
If you could provide me a preview/read-only link to your designer, I'd get a much better overview and can help you a lot easier smile

Here's how to fetch the link:
1. Press "Share"-button
2. Flip OFF switch to ON
3. Copy link and paste it here in this thread.


#3

not quite sure of your question but try this
place the text on the image
add a div absolute position over the image and text.
if you size the div width height to be the same size as the image
it will create an un-clickable layer over the image / text.


#4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.