title: Crossfading Images
body: <p>I am creating an image 'slider' to embellish a landing page on a site. I created a successful, functional slider, though hope to push this further...</p>
  
  <p>I'm hoping to add in an element that creates crossfading images on click (once a tile is selected from beneath the main image space), such as is detailed on the site <a href="http://css3.bradshawenterprises.com/cfimg/" rel="nofollow noreferrer">here</a> (beneath <em>Demo 6 -Fading between multiple images on click</em>)</p>
  
  <p>I have tried integrating the code on this site into the pre-existing JS I have added (within the HTML), though it appears to interfere with the existing elements. The JSFiddle for the current code is <a href="https://jsfiddle.net/BTC_eLearning/pt5bLxv2/5/" rel="nofollow noreferrer">here</a>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@charset "utf-8";
  /* CSS Document */
  
  html {
   box-sizing: border-box;
  }
  
  *, *:before, *:after {
    box-sizing: inherit;
  }
  
  .main-slide {
   height: 250px;
   width: 750px;
   margin: auto;
  }
  
  .selection-panel {
   opacity: 0.6;
   filter: alpha(opacity=60);
  }
  
  .selection-panel:hover {
   opacity:1.0;
   filter: alpha(opacity=100);
  }
  
  .selection-panel-off {
   opacity: 1.0;
   filter: alpha(opacity=100);
  }
  
  .margins {
   margin-top: 16px!important;
   margin-bottom: 16px!important;
  }
  
  .image-spacing,.image-spacing&gt;.single-col {
   padding: 0 8px;
  }
  
  .single-col {
   float: left;
   width: 100%;
  }
  
  .single-col.third {
   width: 33.33333%;
  }
  
  .image-spacing::after,.image-spacing::before {
   content: "";
   display: table;
   clear: both;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Homepage Baner Module&lt;/title&gt;
  &lt;link rel="stylesheet" href="formatting.css" type="text/css" media="screen"&gt;
  &lt;style&gt;
  .mySlides {display:none}
  .demo {cursor:pointer}
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
   &lt;div class="main-image" style="max-width:750px"&gt;
       &lt;img class="mySlides" src="https://dummyimage.com/750x250/ff5100/fff" height="250px" width="100%"&gt;
          &lt;img class="mySlides" src="https://dummyimage.com/750x250/00ff51/fff" height="250px" width="100%"&gt;
          &lt;img class="mySlides" src="https://dummyimage.com/750x250/0055ff/fff" height="250px" width="100%"&gt;
   
       &lt;div class="margins image-spacing"&gt;
           &lt;div class="single-col third"&gt;
              &lt;img class="demo selection-panel" src="https://dummyimage.com/750x250/ff5100/fff" style="width:100%" onclick="currentDiv(1)"&gt;
              &lt;/div&gt;
              &lt;div class="single-col third"&gt;
              &lt;img class="demo selection-panel" src="https://dummyimage.com/750x250/00ff51/fff" style="width:100%" onclick="currentDiv(2)"&gt;
              &lt;/div&gt;
              &lt;div class="single-col third"&gt;
              &lt;img class="demo selection-panel" src="https://dummyimage.com/750x250/0055ff/fff" style="width:100%" onclick="currentDiv(3)"&gt;
              &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  
  &lt;script&gt;
  var slideIndex = 1;
  showDivs(slideIndex);
  
  function plusDivs(n) {
    showDivs(slideIndex += n);
  }
  
  function currentDiv(n) {
    showDivs(slideIndex = n);
  }
  
  function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("demo");
    if (n &gt; x.length) {slideIndex = 1}
    if (n &lt; 1) {slideIndex = x.length}
    for (i = 0; i &lt; x.length; i++) {
       x[i].style.display = "none";
    }
    for (i = 0; i &lt; dots.length; i++) {
       dots[i].className = dots[i].className.replace(" selection-panel-off", "");
    }
    x[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " selection-panel-off";
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>