html - Chrome 在图像上插入框阴影，过渡不起作用

Question

我正在尝试在图像链接上放置一个小插图，当鼠标悬停在上面时它会消失。我正在使用的当前代码在 Firefox 中运行良好，但在 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/

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;
}​