Streaming live at 10am (PST)

How to anchor image to element that zooms on Hover?

Hey everyone,
I’ve added a ‘ribbon’ image on top of a block and it looks great… until I hover over the block and the block enlarges/zooms at which point the ribbon flips out.

I’m pretty sure I haven’t chosen the right Position mode, but I can’t seem to work out how to set up the right one. Perhaps I haven’t anchored the image to the right element? Who knows? Not me. :slight_smile:

I would love it if someone could tell me what I’m doing wrong.

Thanks for reading this far!
All the best,
Dax.


Published site on WF: https://pfss-2020-1.webflow.io/pricing
Read-only link: https://preview.webflow.com/preview/pfss-2020-1?utm_medium=preview_link&utm_source=dashboard&utm_content=pfss-2020-1&preview=bb56343e124e2aec369d8bf770388f1c&mode=preview

While I’m at it with the other thing…

Set Pricing Block to relative. Overflow on.

Use this for Ribbon-Discount:

Screen Shot 2020-07-25 at 9.35.24 PM

Thanks again @jmkriz. That mostly works (and thanks for explaining it), but the ribbon seems to be bound to the edges of the parent Pricing Block. IOW, the ‘extensions’ of the ribbon (mimicking the a 3D object wrapping around the Pricing Block are truncated.
Any ideas on that? I tried adjusting z-index, but it’s already at the top of the stack.

You need to turn overflow on on the pricing block.

Screen Shot 2020-07-26 at 10.28.37 AM

Oh my god, so simple. Now, let’s talk about that beer. :slight_smile: