title: Hover effect transition not working
body: <p>I have been trying to create a hover image effect in my website. I attached the script in the below link. 
  I can't able to set a hover image transition fade effect and 2s time delay.
  Please help me. </p>
  
  <pre><code>&lt;div class="imagecontainer"&gt;
  &lt;img class="myhoverimg" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt=""&gt;
  &lt;div class="myhoveroverlay"&gt;&lt;/div&gt;&lt;/div&gt;
  
  &lt;style&gt;
  .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);
  
  }
  &lt;/style&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/nhu2wmdg/" rel="nofollow">https://jsfiddle.net/nhu2wmdg/</a> </p>