0

私は2つの画像を並べて持っています。目標は、それらにカーソルを合わせると、ゆっくりと拡大してフェードインすることです (div に含まれている間)。ホバー領域からマウスを離すと、元の状態に戻ります。

これは Firefox でうまく機能します。Chrome と Safari では、ホバー領域を離れると、不透明度が 1 から .4 に緩和されるのではなく、.4 に戻ります (Firefox では完全に機能します)。何か不足していますか？

編集/注：不透明度は、スケーリング画像よりも速くフェードインする必要があります。

#img-wrapper {
    width: 1100px;
    margin: 0 auto;
    position: relative;
    height: 550px;
}

.footer-btn a {
    font-weight: bold;
    line-height: 63px;
    text-decoration: none;
    text-transform: uppercase;
    color: #fff;
}
.footer-btn {
    position: absolute;
    z-index: 9000;
    margin-top: 240px;
    -moz-box-sizing: border-box;
    background-color: #000;
    height: 63px;
    width: 400px;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
}
.box {
    width: 550px;
    height: 550px;
    text-align: center;
    overflow: hidden;
    float: left;
}
.box img {
    width: 556px;
    height: 556px;
    padding: 0px;
    overflow: hidden;
    position: relative;

}
.footer-box {
    display: table;
    max-height: 550px;
    position: absolute;
    z-index: 9000;
}
.footer-box .blog {
    height: 556px;
    -webkit-transition: all 10s, opacity 5s;
    -moz-transition: all 10s, opacity 5s;
    -o-transition: all 10s, opacity 5s;
    -ms-transition: all 10s, opacity 5s;
    transition: all 10s, opacity 5s;
    opacity: .4;
}

.footer-box:hover .blog {
    cursor: pointer;
    height:556px;
    width: 556px;
    transform:scale(1.15);
    -ms-transform:scale(1.15); /* IE 9 */
    -moz-transform:scale(1.15); /* Firefox */
    -webkit-transform:scale(1.15); /* Safari and Chrome */
    -o-transform:scale(1.15); /* Opera */
    opacity: 0.9;
}

    <div id="img-wrapper">
        <div class="footer-box">
            <div class="box">
                <div class="footer-btn"><a class="btn" href=''>Button Text</a></div>
                <img class="blog" src="images/footer-splash-left.jpg" alt="">
            </div>
        </div>
        <div class="footer-box" style="right:0px;">
            <div class="box">
                <div class="footer-btn"><a class="btn" href=''>Button Text</a></div>
                <img class="blog" src="images/footer-splash-right.jpg" alt="">
            </div>
        </div>
    </div>
4

1 に答える 1

1

トランジションで 2 つの異なる CSS プロパティを指しているように見えるため、ブラウザのレンダリング「すべて 10」と「不透明度 5」の間に競合があります。

画像を div 内にラップし、その div にすべての不透明度スタイルを含むクラスを与えると、うまくいくはずです。

ここにフィドルがあります：http://jsfiddle.net/MathiasaurusRex/q3RNS/

<div class="opacityWrapper">
<img class="blog" src="http://lorempixel.com/400/200/" alt="">
</div>

.opacityWrapper{
   -webkit-transition:opacity 5s;
    -moz-transition:opacity 5s;
    -o-transition:opacity 5s;
    -ms-transition:opacity 5s;
    transition:opacity 5s; 
    opacity:.3;
}

.footer-box:hover .opacityWrapper{opacity:.9;}
于 2013-11-04T18:14:40.320 に答える