상자 그림자 호버 전환 깜박임

Question

왼쪽에서 오른쪽으로 검정색 배경을 오게하여 img 위에 슬라이드 애니메이션처럼 상자 그림자 작업을하려고합니다. 하지만 나는 이상한 깜박 거리는 문제 없이는 그것을 할 수 없다. 난 이미 스택 오버플로 주변의 솔루션을 찾았습니다.

img 대신 섹션을 사용해 보았지만 그 결과는 같습니다.

Here's the JSFiddle demo

HTML

<section> 
</section> 

CSS이 box-shadow가 그려진되는 방식의 결과로 나타납니다

section { 
    border:black 1px solid; 
    width:500px; 
    height:200px; 
    transition:1s ease-out 
} 

section:hover{ 
    box-shadow:inset 500px 0 0 #222; 
    float:left; 
    transition:1s ease-out; 
} 

Answer 1

. 다른 접근법을 시도하십시오. 여기 상자 그림자 부가 왼쪽 경계 대신 두껍게 플리커없는 해결책이다 :

div { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
section { 
 
    border: black 1px solid; 
 
    width: 500px; 
 
    height: 200px; 
 
    transition: 1s ease-out; 
 
    box-sizing: border-box; 
 
} 
 

 
div:hover section { 
 
    border-left-width: 500px; 
 
    float: left; 
 
    transition: 1s ease-out; 
 
} 
 

 
section~* { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translateX(-50%) translateY(-50%); 
 
    color: #888; 
 
}

<div class="prog"> 
 
    <section></section> 
 
    <p>Here's some text content.</p> 
 
</div>

https://jsfiddle.net/k5kznmvL/

Answer 2

의해 폭 전환을 간단한 의사 소자를 사용하여 적용하는 다른 솔루션 변경 오른쪽 특성 :

section { 
 
    border: black 1px solid; 
 
    width: 500px; 
 
    height: 200px; 
 
    position:relative; 
 
    color:#c2c2c2; 
 
    text-align:center; 
 
    padding-top:50px; 
 
    box-sizing:border-box; 
 
} 
 

 
section:before { 
 
    position: absolute; 
 
    content: " "; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background: #000; 
 
    right: 100%; 
 
    transition:1s ease-out; 
 
    z-index:-1; 
 
} 
 
section:hover::before { 
 
    right:0; 
 
}

<section> 
 
    add your text here 
 
</section>

,129,

Answer 3

매우 작은 확산 반경을 가진 초기 상태에 일종의 상자 그림자 모형을 추가 할 수도 있습니다.

section { 
     box-shadow: inset 0 0 0 0.01px white; 
    }