Streaming live at 10am (PST)

Interactive images - is it possible?


#1

Hey webflow people! I'm trying to achieve something that I think is quite complex so would appreciate anyone's help on this. What I'm after is the ability to overlay content (text/images) on top of an image, in multiple areas. The image I'm using in of our 'project wall', which we use to track the work we are doing in our studio. I want to recreate this digitally so people can see what we're working on via our website. I'm trying to overlay text and links using div blocks onto the blank cards so that each card has a specific project, which then can link to more info about the work further down the page

I've played around with div blocks, using different positioning options such as relative and absolute but I haven't been able to achieve a 'tracking' method, as such, so that the content remains on top of the blank cards of the image when changing the size of the browser or switching between devices. Is this even possible in webflow, or do I need some decent coding experience to achieve something like this?

Public link to page is https://webflow.com/design/dhwlab?preview=a5654995f2980e62f9fbc726d6516e90

Appreciate your help!


#2

Hi Nick. There will always be someone to say that this is achievable in Webflow by adding Javascript or so. There are a few things: first this is difficult as images and text, and elements made of other elements (divs with card content) aren't resizing the same way. Secondly, the way it displays just now isn't a good start, you can barely see what's on a card, so what's the point if it's already the maximum size?

Your issue isn't technical in my opinion, it's design issue. As much as you want to use this visual representation, that makes sense to you because it's your in-house system, it's going to have less meaning to your visitors. So you can keep the board idea, but you should rethink it to make it feasible on the web.

First you should forget about making your background board image scaling with the browser. Put it in a div, in a container, so that you control how much and when it scales. You can even optimize this board by using just on portion of the mesh and make it repeat.
I would use an image of the board only, empty. Then, I will add the card in the card element, as a background. So your card element would get the card background and the text on top of it. So that if it happens that the card slides on the board, it won't matter that much, as long as the text is still on par with the card background. You can also chose another kind of board for the background, for example a cork one, so the cards can be placed anywhere (with a pin instead of the hooks)...

See what I mean? Nice idea, but don't try to do something that's very hard and has little meaning in the end, try to think of a better way to achieve the same result.


#3

Thanks Vincent. I agree with your comments so will look into different ways of achieving a similar result like you've suggested.

Cheers!


#4