title: Pure CSS Thumbnail viewer, but problems with placement
body: <p>I have a pure CSS image script I use with my eBay listings, I'm changing the design of my template at the moment and have run into a major snag with the code, it seems that the large image can only be displayed directly below the thumbnail radio buttons, but I want to have the large image being displayed in a different table cell..</p>
  
  <p>I don't know a great deal about CSS, so hopefully someone will know an easy fix? here's hoping..</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>&lt;style type="text/css"&gt;
  div.Image1BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image1_zpsus8mlxre.jpg'); background-size: 110px 92px; }
  div.Image2BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image2_zpsetwycsgp.jpg'); background-size: 110px 92px; }
  div.Image3BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image3_zpsxtx5woeg.jpg'); background-size: 110px 92px; }
  div.Image4BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 110px 92px; }
  div.Image5BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 110px 92px; }
  div.Image1BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image1_zpsus8mlxre.jpg'); background-size: 600px 500px; }
  div.Image2BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image2_zpsetwycsgp.jpg'); background-size: 600px 500px; }
  div.Image3BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image3_zpsxtx5woeg.jpg'); background-size: 600px 500px; }
  div.Image4BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 600px 500px; }
  div.Image5BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 600px 500px; }
  
  section {
    display: none;
  }
  input {
    display: none;
  }
  label {
    display: inline-block;
    font-weight: 600;
    color: #bbb;
    border: 1px solid transparent;
  }
  label:hover {
    cursor: hand;
    border: 1px solid #1F7AB6;
    box-shadow: 2px 2px 7px #d0d0d0;
  }
  label {
    margin: 0px 5px 0px 0px;
  }
  input:checked + label {
    border: 1px solid #155179;
    box-shadow: 2px 2px 7px #c0c0c0;
  }
  #tab1:checked ~ #content1,
  #tab2:checked ~ #content2,
  #tab3:checked ~ #content3,
  #tab4:checked ~ #content4,
  #tab5:checked ~ #content5 {
    display: block;
  }
  &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table border=1&gt;&lt;tr&gt;&lt;td&gt;
    &lt;input id="tab1" type="radio" name="tabs" checked&gt;
    &lt;label for="tab1"&gt;&lt;div class="Image1BlockS"&gt;&lt;/div&gt;&lt;/label&gt;
    &lt;input id="tab2" type="radio" name="tabs"&gt;
    &lt;label for="tab2"&gt;&lt;div class="Image2BlockS"&gt;&lt;/div&gt;&lt;/label&gt;
    &lt;input id="tab3" type="radio" name="tabs"&gt;
    &lt;label for="tab3"&gt;&lt;div class="Image3BlockS"&gt;&lt;/div&gt;&lt;/label&gt;
    &lt;input id="tab4" type="radio" name="tabs"&gt;
    &lt;label for="tab4"&gt;&lt;div class="Image4BlockS"&gt;&lt;/div&gt;&lt;/label&gt;
    &lt;input id="tab5" type="radio" name="tabs"&gt;
    &lt;label for="tab5"&gt;&lt;div class="Image5BlockS"&gt;&lt;/div&gt;&lt;/label&gt;
    &lt;section id="content1"&gt;
    &lt;div class="Image1BlockB"&gt;&lt;/div&gt;
    &lt;/section&gt;
    &lt;section id="content2"&gt;
    &lt;div class="Image2BlockB"&gt;&lt;/div&gt;
    &lt;/section&gt;
    &lt;section id="content3"&gt;
    &lt;div class="Image3BlockB"&gt;&lt;/div&gt;
    &lt;/section&gt;
    &lt;section id="content4"&gt;
    &lt;div class="Image4BlockB"&gt;&lt;/div&gt;
    &lt;/section&gt;
    &lt;section id="content5"&gt;
    &lt;div class="Image5BlockB"&gt;&lt;/div&gt;
    &lt;/section&gt;
  &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>