title: Automatic Multiple Image switch with different links on each IMG
body: <h3>Background:</h3>
  
  <p>Finding improved ways to use CSS, I came across the proposition of using image transitions for good effects.
  After a few stumbles, I managed to do this with the help of some references to make a smooth transition in hover.
  Now I want it automatic and with links in each picture, but I'm at a loss at the code.</p>
  
  <h3>Current JSFiddle:</h3>
  
  <p>None, JSFIDDLE doesn't accept IMG and I can't show there.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;img src="sky.jpg"&gt;
    &lt;img class="front" src="bear.jpg"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.container
  {
    position:relative;
    height:500px;
    width:500px;
    margin:0 auto;
  }
  
  .container img
  {
    position:absolute;
    transition: opacity 1s ease-in-out;
  }
  
  .container img.front:hover
  {
    opacity:0;
  }
  </code></pre>
  
  <h3>Problem:</h3>
  
  <p>This HTML-CSS works but for a single image switch (2 images) on hover, not for multiple ones automatically.</p>
  
  <h3>Need:</h3>
  
  <p>A change in the code which allows multiple switches using CSS and HTML only, with different links on each image.
  I know there are possibilities with JQUERY and JAVACRIPT, I wish for a solution without these two.</p>
  
  <h3>Solution Code restrictions and parameters:</h3>
  
  <ul>
  <li>No JQUERY nor JAVASCRIPT</li>
  <li>Multiple browser compatibility (doesn't need to be very old ones)</li>
  <li>Possibility of multiple links in each image switch</li>
  </ul>
  
  <p>Many Thanks for all help provided.</p>