전환이 작동하지 않는 이미지에 크롬 인세트 박스 섀도우가 표시됩니다.

Question

이미지 링크에 비네트를 놓으려고합니다. 현재 사용중인 코드가 Firefox에서는 제대로 작동하지만 크롬에서는 전환 효과가 실행되지 않습니다.

축소판 이미지를 제거하려는 경우 배경이 동일한 효과를 나타내며 전환 효과가 표시됩니다.

이것은 버그입니까?

<article> 
       <div class="thumbnail"> 
        <a href="#"><img src="images/download.jpg" alt="" /></a> 
       </div> 
       <div class="article-text"> 
        <h3>Article Header</h3> 
        <div class="author"> 
         Author Name here. Date Posted Here. 
        </div> 
        <p>Lorem ipsum</p> 
        <div class="meta"> 
         <ul class="meta-items"> 
          <li>Arbitrary Number</li> 
         </ul> 
         <a class="button" href="#"> 
          <span>Read More</span> 
         </a> 
        </div> 
       </div> 
      </article> 

전체 CSS/HTML

는 JSfiddle에서 볼 수 있습니다 : http://jsfiddle.net/aSTKK/

Answer 1

아니오, 그것은 버그가 아닙니다. 의사 요소의 전환은 Firefox에서 작동합니다 (개인적으로는 다른 브라우저에서 계속 작동하고 있습니다). there is a way to emulate them for some properties. 미리보기 이미지를 제거하면 의사 요소가 아닌 요소 자체 (이미지를 가지고있을 때 이미지 아래)에 전환이 표시됩니다.

가능한 해결책 : 이미지를 반투명하게 만들고 호버링 할 때 불투명도를 1로 변경할 수 있습니다 (이전에 수행 한 this gallery of examples, 특히 3 행 3 열 참조).

무언가 like this (나는 더 잘 보이게하기 위해 의사 요소의 그림자를 빨간색으로 변경했습니다).

관련 CSS :

.thumbnail { 
    width:48%; 
    height:200px; 
    float:left; 
    padding:0; 
    background:#37779f; 
    box-shadow: inset 0 0 230px 40px rgba(0, 0, 0, 0.5); 
    -webkit-transition: 1.3s; 
    -moz-transition: 1.3s; 
    transition: 1.3s; 
    overflow:hidden; 
    text-align:center; 
} 
.thumbnail a{ 
    position:relative; 
    max-width:100%; 
    float:left; 
} 
.thumbnail:hover{ 
    box-shadow:inset 0 0 115px 20px rgba(0,0,0,0.5); 
} 
.thumbnail a:after{ 
    content:''; 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    box-shadow:inset 0 0 115px 20px rgba(255,0,0,1); 
} 
.thumbnail img { 
    width:100%; 
    height:auto; 
    opacity: .3; 
    -webkit-transition: 1.3s; 
    -moz-transition: 1.3s; 
    transition: 1.3s; 
} 
.thumbnail:hover img { 
    opacity: 1; 
}​