title: CSS Image Swap One at a Time
body: <p>JSFiddle Here: <a href="https://jsfiddle.net/br84z1Lj/" rel="nofollow">https://jsfiddle.net/br84z1Lj/</a></p>
  
  <p>On hover, both images swap, instead of just one.  If I end the div for "swapMe" and restart it for the next image, it puts the next image on the next line, instead of staying in line.  I'm completely stuck on getting only one image to change on hover instead of both!</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>@charset "utf-8";
  
  /* CSS Document */
  
  #thumbs {
    width: 460px;
    margin-top: 90px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
  }
  
  #thumbs a {
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
  }
  
  .stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
  }
  
  .swapMe img {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
  }
  
  .swap1,
  .swapMe:hover .swap2 {
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
  }
  
  .swapMe:hover .swap1,
  .swap2 {
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body&gt;
  
    &lt;div id="thumbs"&gt;
      &lt;div class="swapMe"&gt;
  
        &lt;a id="single_image1" href="#"&gt;&lt;img src="http://dummyimage.com/200/000000/fff" class="swap1" style="position: absolute" height="150" width="188" alt="" /&gt;
          &lt;img src="http://dummyimage.com/200/d100d1/fff" height="150" width="188" class="swap2"&gt;
        &lt;/a&gt;
  
        &lt;a id="single_image2" href="#"&gt;&lt;img src="http://dummyimage.com/200/000000/fff" class="swap1" style="position: absolute" height="150" width="188" alt="" /&gt;
          &lt;img src="http://dummyimage.com/200/d100d1/fff" height="150" width="188" class="swap2"&gt;
        &lt;/a&gt;
  
  
  
        &lt;span class="stretch"&gt;&lt;/span&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>