Custom Buttons using two images for hover

Community resources General
1

I design my site using images as buttons that are more consistent with my brand. Currently, I have both images layered on top of each other so that when you hover over one, an interaction hides the top layer. This way the button looks more like a button and can be interacted with.

But, depending on my browser, sometimes you can see the bottom layer before hovering. It’s barely visible but it’s enough to drive me crazy.

Is there a better way to do this so I can guarantee the bottom layer is never visible until its hovered over?

Currently both images/buttons are set to relative, and I had to manually move them to get them to match up.

Issue on Chrome
Issue on Chrome1920×1144 100 KB

Issue on Safari
Issue on Safari1862×1094 86.8 KB

[Webflow - Woo Punch](https://Read Only Link)

2

It should be set up more like my screen grab below.

  1. Use a single link block. Set it to relative
  2. Place both images inside the link block and set them to Absolute positioning, using the default position of top-left. (no need for position shifting)
  3. Top image will have a higher z index.
  4. Apply the hover interaction to the link block, telling the top image to change opacity on hover.

link
link1413×1443 266 KB

3

You’re a lifesaver! Although when I made both images absolute they disappeared. I had to have the top one absolute top left and the bottom one relative (auto all around).