Community forum for knowledge and support

Updated 6 months ago

Image overlay issue

At a glance

A community member is having an issue with an image overlay not showing properly on the published site, even though it looks fine in the preview/designer. Other community members provide the published site URL and suggest disabling the image responsiveness, as Webflow may be injecting a width/size that is causing the issue. After further investigation, it is determined that the issue is due to a Relume bug, and the recommended solution is to duplicate the image-overlay-layer class and put the component name in front of it.

Useful resources

Hey guys! For some reason, my image overlay is not showing porperly on preview/published site. What could it be?

Attachment
Captura de pantalla 2024-08-13 a la(s) 2.46.36 p. m..png
M
M
25 comments

I’m also having this issue con my published site. The image looks small but on preview/designer looks good.

Thanks in advance

Attachments
Captura de pantalla 2024-08-13 a la(s) 4.44.56 p. m..png
Captura de pantalla 2024-08-13 a la(s) 4.44.49 p. m..png

since the issue is on the published URL - mind sending that along?

ah the published URL - I saw you had sent the preview, but wanted the webflow.io URL

I do need both for sure but I'll need to actually see the issue

yeah thanks man, appreciate it!

Looks like you'll need to disable the responsiveness of the image because with that on webflow is injecting a width/size for that image and I think its shrinking it. I am honestly not 100% sure why some images do this and others don't. I wish I had time to dig into it more but as of right now I don't - I might dig into it later though and if I find anything, I'll let you know.

Attachment
image.png

But about the main request

Image overlay thats not showing on published

for some reason there is an opacity of 0 set on that element and I can't see any reason why. is there any custom code anywhere?

Attachment
image.png

also actually it does show up in designer, even though there are no styles applied to that, so maybe somewhere else in the process there is an interaction that is targetting that class?

There is no custom code! Just relume :)

yep I just found it - in the hero, because of that hero header....wild

ugh yeah this is a Relume bug Matias, very sorry for that.

easiest solution is to duplicate the class and put the component name infront of it and everything should work as expected.

Attachment
image.png

duplicate image-overlay-layer

Thank you, ill try asap. Have a good day

Add a reply
Sign up and join the conversation on Slack