No fade effect in this slideshow JavaScript, CSS and HTML
<p>I have a slideshow.  It works but doesn't look good because it doesn't fade. I am using this HTML code:</p>

<pre><code>&lt;img class="Container2" src="Images/Wedding/Wedding1.jpg" alt="weddings" name="slide" /&gt;
</code></pre>

<p>And this for the JavaScript</p>

<pre><code>&lt;script language="JavaScript"&gt; 
  var i = 0; 
  var path = new Array(); 
  path[0] = "Images/Wedding/Wedding1.jpg"; 
  path[1] = "Images/Wedding/Wedding2.jpg"; 
  path[2] = "Images/Wedding/Wedding3.jpg"; 

  function swapImage() 
  { 
    document.slide.src = path[i];

    if(i &lt; path.length - 1) 
      i++; 
    else 
      i = 0; 

   setTimeout("swapImage()",20000); 
  } 
  window.onload=swapImage; 
&lt;/script&gt;
</code></pre>

<p>The <code>css</code> is only to make the image bigger. I tried to use this to create a fade effect:</p>

<pre><code>opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;"
</code></pre>

<p>But this did not work!</p>

<p>Does anyone have an easy solution to create a fade effect in this slideshow?</p>