ホバーで画像ソースをスムーズに変更

Question

私は現在、画像ソースを変更するためにCSSを使用していますが、非常に突然です。 cssやjqueryを使ってマウスを使って画像をスムーズに変更するにはどうしたらいいですか？

現在のコード：

.containerBox1:hover{ 
 
\t content: url('http://example.com/prouser-newimage.png'); 
 
    } 
 
    .containerBox2:hover{ 
 
\t content: url('http://example.com/domuser-newimage.png'); 
 
    } 
 
    .containerBox3:hover{ 
 
\t content: url('http://example.com/aboutus-newimage.png'); 
 
    }

<a href="http://example.com/prouser"> 
 
    <div class="containerBox1"> 
 
    <img src="http://example.com/prouser.png"/> 
 
    </div> 
 
    </a> 
 
    <a href="http://example.com/domuser/"> 
 
    <div class="containerBox2"> 
 
    <img src="http://example.com/domuser.png"/> 
 
    </div> 
 
    </a> 
 
    <a href="http://example.com/aboutus"> 
 
    <div class="containerBox3"> 
 
    <img src="http://example.com/aboutus.png"/> 
 
    </div> 
 
    </a>

ありがとう、 transitionのようなものが content上で動作していないので、あなたがここに contentを使うべきではありません実際に

Answer 1

D、代わりのcontentを使用を使用してtransitionを使用すると、グーグルで速く答えを見つけることができますが、私はあなたの間違いを訂正するために答えました。そうでなければtransitionはGoogleでとても簡単です。

.containerBox1 { 
 
    transition: .3s background ease; 
 
    background: url(https://googlechrome.github.io/samples/picture-element/images/butterfly.jpg); 
 
    width: 200px; 
 
    height: 200px; 
 
    background-size: cover; 
 
} 
 

 
.containerBox1:hover { 
 
    background: url(https://media.winnipegfreepress.com/images/400*384/3229268.jpg); 
 
    background-size: cover; 
 
}

<a href="http://example.com/prouser"> 
 
    <div class="containerBox1"> 
 
    </div> 
 
</a>