Lightbox Image overlay position problem

[alzibaba]

Hi folks,
I’m having a problem with correct positioning of an image overlay on a Lightbox.

Overlays have worked fine on other Lightboxes I’ve done, but this one positions itself in a column that the lightbox sits in rather than in the Lightbox image, so is wider and taller than the image it’s supposed to cover.

You can see how the overlay is nested in the Lightbox class here:

But in the selector view you can see the position is set to Column 1, not the Lightbox class, and for the life of me I can’t change it.

I figure this is what’s causing the problem, but may well be wrong. Any ideas how to solve it?

Many thanks

Al

[vincent (Vincent Bidaux)]

Can you please share your project’s public link so it’s easier to understand your issue?

Learn how to do it here: Share a read-only link | Webflow University

Sinon utilise le ROW widget peut s’avérer un peu casse-gueule justement à cause des colonnes, qu’il faut éviter de styler. A ce stade tu peux essayer de repartir de zero en ne touchant jamais aux colonnes. Sitot le ROW posé, tu mets un div dedans et tu le nomme col-container ou un truc du genre. C’est à lui que tu vas donner la position:relative pour ensuite venir positionner ton overlay.

Les colonnes ont du mal à être stylées et surtout énormément de mal à calculer leur hauteur, il faut les utiliser avec précaution et pas hésiter à les remplacer par une suite de divs en display:inline-box qui posent moins de problèmes.

[alzibaba]

Sure, sorry about that. Here’s the link: Webflow - energierenouvelable.ch

Merci pour les infos Vincent, oui, c’est éventuellement un problème du ROW widget. J’essayerai a nouveau…

Al

[vincent (Vincent Bidaux)]

See when they’re inline-block they can sit together

http://vincent.polenordstudio.fr/snap/gjnc4.jpg

[alzibaba]

Thanks very much. The weird thing now is that I can’t get the overlay div to display on hover. It’s set to 0% fill with no state, and 90% fill on hover. See the projects page top two inline blocks. The ones below work fine in a row widget. I could just copy these and change the content, but I wanted to style the Centre de Dév block differently…

[alzibaba]

I’ve solved this by starting the lightbox from scratch again, within a 50% inline block. The overlay div is now working over the lightbox as it should. I have no idea why but in my first attempt the overlay div kept on putting itself within the body even though it was nested within the lightbox. This meant it covered the whole page on hover instead of just the image. Starting again and using exactly the same steps it works fine. Very strange, but I guess I’ve missed something crucial along the line…

Many thanks for your speedy help vincent, much appreciated.