Hi, I am trying to create a hover effect where a hover image overlaps to the pre-existing image. I can recreate this as in the demo kit project, using interactions, but I can’t get the same pattern to work in the project I am working on right now, since here things are a bit more complicated: the image is also supposed to link to a video that opens within a lightbox. As you can see in the screenshot, the two images do not overlap perfectly, the size is different, despite the fact that the size of both containers is set to “Auto”. I guess there’s a problem with nested elements but it gets quite confusing to this point, I hope you can help me figure out.
It’s also strange that the video URL does not seem to be editable (it does work though).
Real-only link: Webflow - UX MAP
Browser: Chrome on Mac OX El Captain.
Site live (as it should work, but hover effect is currently achieved simply by changing opacity on hover state): www.ux-map.com
I just tried to remove the “video thumbnail” style but the two images still do not overlap, despite being the same size. Right now there’s no styles applied to them, while the wrappers are styled but with the same settings - only difference is that one is set to “absolute” position and opacity 0%. So that doesn’t seem to solve the issue.
Not sure how I could have a single wrapper, I thought I’d need a div just for the element that has to be displayed on hover, so the opacity can be set to 100% via interactions. Is there another way to achieve that?
Hi @lucaben, Do you have a new or recent screenshot showing the updated issue? I want to help, but going off of just the description is making this tough.
Basic gist of overlaying an element:
(1) Parent element set to position relative
(2) Image set to block
(3) Overlaying image set to position absolute
There are a few other ways to achieve what you’re trying to do that imo would help make this easier - if you want, I can try to whip up something over the weekend. (Hint: instead of overlaying images, you’d have a single image that changes opacity with an overlaying “play” button)
Thanks for the clarification. I did set the parent block as relative and the hover block as absolute. Images are both set as blocks (by that I guess you are referring to the container divs).
Creating the hover effect was not problematic in the first place, it’s the presence of the lightbox to activate the full screen video that seems to affect the result.
I am really keen on learning Webflow inside out and would like to make this work. Not sure if the alternative method that you are suggesting would give the same result, I would like to show the video thumbnail as default for better affordance and have a darker rollover image that overlaps, while the background becomes lighter.
I am trying to understand if there’s a problem with the exported HTML that I can’t do anything about or if it’s the way I nested elements that is creating problems.
Hi I spent a few more hours on this today making lots of tests, I simplified everything and when done separately, it works fine: Webflow - UX MAP (incl. the lightbox effect)
On the site I am working on (latest: Webflow - UX MAP), the problem with images not overlapping seems to be exclusively related to the columns layout. I’ve done experiments moving the lightbox block containing the two images outside the column configuration, right under the parent container, and everything suddenly works. It also works if I set the columns ratio to 3:9. The problem is that with the columns ratio currently set to 5:7, the two images don’t overlap anymore and appear with a different size. I really have no idea what to do now! Changing the layout is the last thing I want to do, it took me a long time to get it to work and both the hero text and hero image are nicely responsive. I am attaching two screenshots. Right now the hover image is set to absolute while the default to relative.
Hi @lucaben, Thanks for your patience You are almost there
I suggest a little restructuring of the lightbox link elements, it should not take too much effort. I have given a demonstration of one technique to use on your setup:
Parent element set to relative position
Overlay div set to Absolute position and full cover
Interaction on Overlay div to set it’s initial appearance
Interaction on Lightbox lnteraction class to trigger opacity change on Overlay div.
You can put whatever contents you want in Overlay div.
Let me know if that helps, if not, I am happy to answer any questions you might have.
You are almost there