title: Hide an Image when another Image/Item is clicked usin css only?
body: <p>I need to make this happen, and to make it without using jQuery, I saw a working example, but when I coded my own it couldn't hide the image as I wanted. 
  Here is the line from .css that is supposed to help me hide an image when I click on another one:</p>
  
  <pre><code>    /*Selected image display*/
      .image-gallery .big-image img:target{display:block;}
      /*on select image dusplay none the default image*/
      .image-gallery .big-image img:target ~ img#default{display:none;}
      /*Shoe Default Image in first load*/
      .image-gallery .big-image img#default{display:block;}
  </code></pre>
  
  <p>Here is the part of my code that css should trigger:</p>
  
  <pre><code>    &lt;div id="image-wrap"&gt;
       &lt;div class="image-gallery"&gt;
        &lt;div class="big-image"&gt;           
          &lt;a href="http://i.ebayimg.com/00/s/MTYwMFgxNjAw/z/JEkAAOxyThVTcEM~/$_57.JPG"&gt;&lt;img style="max-height: 400px" id="merge" src="http://i.ebayimg.com/00/s/MTYwMFgxNjAw/z/JEkAAOxyThVTcEM~/$_57.JPG" /&gt;&lt;/a&gt;
          &lt;a href="http://i.ebayimg.com/00/s/MTYwMFgxMDIy/z/2cEAAOxyYANTcENF/$_57.JPG?rt=nc"&gt;&lt;img style="max-height: 400px" id="fullbody" src="http://i.ebayimg.com/00/s/MTYwMFgxMDIy/z/2cEAAOxyYANTcENF/$_57.JPG?rt=nc" /&gt;&lt;/a&gt;
          &lt;a href="http://i.ebayimg.com/00/s/MTYwMFgxMTg1/z/36kAAOxy9X5TcENO/$_57.JPG?rt=nc"&gt;&lt;img style="max-height: 400px" id="closeup" src="http://i.ebayimg.com/00/s/MTYwMFgxMTg1/z/36kAAOxy9X5TcENO/$_57.JPG?rt=nc" /&gt;&lt;/a&gt;
          &lt;img style="max-height: 400px" id="default" src="http://i.ebayimg.com/00/s/MTYwMFgxNjAw/z/JEkAAOxyThVTcEM~/$_57.JPG" /&gt;
        &lt;/div&gt;
   &lt;ul&gt;
  &lt;li&gt;
    &lt;a href="#merge"&gt;&lt;img style="max-height: 70px" src="http://i.ebayimg.com/00/s/MTYwMFgxNjAw/z/JEkAAOxyThVTcEM~/$_57.JPG" /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;
    &lt;a href="#fullbody"&gt;&lt;img style="max-height: 70px" src="http://i.ebayimg.com/00/s/MTYwMFgxMDIy/z/2cEAAOxyYANTcENF/$_57.JPG?rt=nc" /&gt;&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
     &lt;a href="#closeup"&gt;&lt;img style="max-height: 70px" src="http://i.ebayimg.com/00/s/MTYwMFgxMTg1/z/36kAAOxy9X5TcENO/$_57.JPG?rt=nc" /&gt;&lt;/a&gt;
  &lt;/li&gt;
  
  
  
    &lt;/div&gt;
  
   &lt;/div&gt;  
  </code></pre>
  
  <p>And here is the full example of the work in progress in jsfiddle <a href="http://jsfiddle.net/sq72x/" rel="nofollow">http://jsfiddle.net/sq72x/</a></p>