懸停效果轉換不起作用

Question

我一直在試圖在我的網站上創建一個懸停圖像效果。我在下面的鏈接中附加了腳本。 我無法設置懸停圖像轉換淡入效果和2秒延遲。 請幫幫我。

<div class="imagecontainer"> 
<img class="myhoverimg" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt=""> 
<div class="myhoveroverlay"></div></div> 

<style> 
.imagecontainer { 
    position:relative; 
    width:361px; 
    height:181px; } 
.myhoverimg{ 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
} 

.myhoveroverlay{ 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    z-index:100; 
} 

.myhoveroverlay:hover{ 
     background:url(http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg); 

} 
</style> 

https://jsfiddle.net/nhu2wmdg/

Answer 1

您可以使用不透明ATTR褪色的圖片

.myhoveroverlay{ 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    z-index:100; 
    opacity : 1; 
} 

.myhoveroverlay:hover{ 
    background:url(http://css3.bradshawenterprises.com/images /Windows%20Logo.jpg); 
    opacity : 0.9; 

} 

Answer 2

感謝您的幫助@Leo。正是我在找什麼。 jsfiddle.net/nhu2wmdg/1