Stacked images of same size but back image outlines front image

Design help General
1

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: Webflow - Amy Woolsey

2

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.

3

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

4

Check the radius of the hover state.

5

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?

6

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
7

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