I've been attempting to incorporate a hover image effect on my website. I included the script in the link below. However, I'm struggling to achieve a smooth fade transition and a 2-second delay on the hover image. Can someone please assist me with this?
<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>