平滑地改變圖像來源懸停

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>

謝謝 d

Answer 1

其實因爲content不工作像transition你不應該在這裏使用content，而不是content使用background-image，然後使用transition，你可以谷歌和更快地找到你的答案，但我回答糾正你的錯誤，否則找到transition是如此簡單的谷歌。

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