overflow: hidden sta causando il bordo bianco con la transizione css

Sto usando questa transizione css davvero interessante quando passo il mouse su un’immagine. Funziona bene, ma a volte sembrano esserci bordi bianchi. Quando non uso l’overflow: nascosto, i bordi sono spariti. Ma ho bisogno dell’overflow: nascosto altrimenti la transizione non funziona. (img è 500px w / 500px h)

Qualcuno mi può aiutare con questo?

.grid { position: relative; margin: 0 auto; overflow: auto; width: 100%; list-style: none; text-align: center; } /* Common style */ .grid figure { position: relative; float: left; overflow: hidden; margin: 10px 1%; margin: 0; width: 25%; /* background: #101224; */ text-align: center; cursor: pointer; } .grid figure img { position: relative; display: block; width: 100%; opacity: 0.8; } .grid figure figcaption { padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .grid figure figcaption::before, .grid figure figcaption::after { pointer-events: none; } .grid figure figcaption, .grid figure figcaption > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Anchor will cover the whole item by default */ /* For some effects it will show as a button */ .grid figure figcaption > a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; } .grid figure h2 { word-spacing: -0.15em; font-weight: 300; } .grid figure h2, .grid figure p { margin: 0; } .grid figure p { letter-spacing: 1px; font-size: 68.5%; } /*---------------*/ /***** Sadie *****/ /*---------------*/ figure.effect-sadie figcaption::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(top, rgba(17, 18, 36, 0) 0%, rgba(17, 18, 36, 0.8) 75%); background: linear-gradient(to bottom, rgba(17, 18, 36, 0) 0%, rgba(17, 18, 36, 0.8) 75%); content: ''; opacity: 0; -webkit-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); } figure.effect-sadie h2 { position: absolute; top: 50%; left: 0; width: 100%; color: #fff; /* color: #dd9a45; */ -webkit-transition: -webkit-transform 0.35s, color 0.35s; transition: transform 0.35s, color 0.35s; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } figure.effect-sadie figcaption::before, figure.effect-sadie p { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; } figure.effect-sadie p { position: absolute; bottom: 0; left: 0; padding: 2em; width: 100%; opacity: 0; -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } figure.effect-sadie:hover h2 { color: #dd9a45; ; -webkit-transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0); transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0); } figure.effect-sadie:hover figcaption::before, figure.effect-sadie:hover p { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } @media only screen and (max-width: 1000px) { .grid figure { width: 50%; } } @media only screen and (max-width: 500px) { .grid figure { width: 100%; } .grid { padding: 0 5% } } 
 
img02

IMG ONE

Sadie never took her eyes off me.
She had a dark soul.

View more
img14

IMG TWO

Sadie never took her eyes off me.
She had a dark soul.

View more
img02

IMG THREE

Sadie never took her eyes off me.
She had a dark soul.

View more
img14

IMG FOUR

Sadie never took her eyes off me.
She had a dark soul.

View more

uscita con bordi evidenziati