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.
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.
On the site I am working on (latest: https://preview.webflow.com/preview/ux-map?preview=11cdde13775de465ab78859ec648919e), 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.