Html 悬停效果转换不工作

我一直在尝试在我的网站上创建一个悬停图像效果。我在下面的链接中附加了脚本。 我无法设置悬停图像过渡淡入淡出效果和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>

.imagecontainer{
位置：相对位置；
宽度：361px；
高度：181px；}
myhoverimg先生{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
} 
.myhoveroverlay{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
z指数：100；
}
.myhoveroverlay:悬停{
背景：url(http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg);
}

---

您可以使用不透明度属性使图像褪色

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

}

---

您可以使用不透明度属性使图像淡入淡出

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

}

---

谢谢你的帮助@Leo。正是我想要的。

---

谢谢你的帮助@Leo。正是我想要的。

---

像这样，你能告诉我如何添加延迟吗？你能告诉我如何添加延迟吗。