Chrome嵌入框陰影與轉換不工作的圖像

我試圖在圖像鏈接上放置一個小插曲，當它懸停時消散。我使用的當前代碼在Firefox中正常工作，但在Chrome中，過渡效果無法運行。Chrome嵌入框陰影與轉換不工作的圖像

如果您要刪除縮略圖圖像，則背景具有相同的效果，並顯示其上的轉換。

這是一個錯誤？

<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/

來源

2012-10-26 Xero1

不，這是不是一個錯誤。僞元素的轉換隻能在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; 
}

來源

2012-10-26 20:06:16 Ana

Chrome嵌入框陰影與轉換不工作的圖像

回答

相關問題