1

画像リンクにビネットを配置しようとしていますが、ホバーすると消えます。現在使用しているコードは 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/

4

1 に答える 1

1

いいえ、バグではありません。疑似要素のトランジションは Firefox でのみ動作します (個人的には、将来的に他のブラウザーでも動作することを望んでいます) が、一部のプロパティでそれらをエミュレートする方法があります。サムネイル画像を削除すると、疑似要素ではなく、要素自体 (画像がある場合は画像の下にあります) にトランジションが表示されます。

考えられる解決策: 画像を半透明にし、ホバー時に不透明度を 1 に変更することができます (このギャラリーの例、特に行 3、列 3 を参照してください)。

このようなものです（見やすくするために、疑似要素の影を赤に変更しました）。

関連する 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-26T20:06:16.140 に答える