Streaming live at 10am (PST)

Stacked images of same size but back image outlines front image

Hello. Thanks for the help.

I have 2 stacked images that transition so that the front image has a 0% opacity upon hover.

The background is a dark gray.
The top image is blue and the hover image is white.

When in the none state, a slight white line shows up around the blue image despite the top and hover images being identical in shape and size.

I’ve triple checked that the blue image doesn’t have a white line around it when by itself, so it’s for sure not the top/blue image. It appears to have something to do with stacking them.

Below is the link to my site, and it’s the LinkedIn images in the footer that I am referring to, although Twitter and Dribbble have a slight haze, just not as bad.


Here is my site Read-Only: https://preview.webflow.com/preview/amy-woolsey?utm_medium=preview_link&utm_source=designer&utm_content=amy-woolsey&preview=2fe0b5697de96f4fb37ad8465a92df9f&mode=preview

I’m guessing this may be the issue.

image

Click each item on your page(s) and watch for setting changes. e.g.
The section under your home wrapper has a box shadow.

Thanks Cat. I checked each item and there are no Box Shadows.

Check the radius of the hover state.

Okay, thanks. I changed the state to hover on the top image, but the only radius I see has to do with Borders of which I have none set on the Social Media icons. Is there another place to look?

The “Borders” image show where I changed the radius from 0 to 10px. This in turn hid the tiny white marks on the LinkedIn Hover.
image image

1 Like

Oh, I get it! Brilliant!!! Thank you so much.