title: HTML Java CSS make list appear in different div after box checked
body: <p>I am pretty new to HTML, Java, and CSS and have been working on getting hovering elements to appear in different regions in a webpage. I have created this jfiddle which shows what I have thus far:</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-js lang-js prettyprint-override"><code>startList = function() {
      var sfEls = document.getElementById("over").getElementsByTagName("li");
      for (var i=0; i&lt;sfEls.length; i++) {
          sfEls[i].onmouseover=function() {
              //first remove all existing classes of .over
              for (var j=0; j&lt;sfEls.length; j++){
                  sfEls[j].className=sfEls[j].className.replace(new RegExp(" over\\b"), "");
              }
                  this.className+=" over";// now add class
          }
      }
  }
  
  // addLoadEvent 
  function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
      window.onload = func;
    } else {
      window.onload = function() {
        if (oldonload) {
          oldonload();
        }
        func();
      }
    }
  }
      
  addLoadEvent(startList);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;head&gt;
  * {
      margin:0;
      padding:0
  }/* for demo only - use a proper reset of your own*/
  body { padding:20px 10px }
  a img {
      display:block;
      border:none;
  }
  .outer {
      width:760px;
      margin:auto;
      border:1px solid #000;
      padding:10px 10px 20px;
      position:relative;/* stacking context*/
      overflow:auto;
  }
  .outer2{
      width:1000px;
      margin:auto;
      border:1px solid #000000;
      position:relative;
  }
  .image-holder {
      float:right;
      margin:86px 10px 10px 0;
      width:500px;
      height:400px;
      background:#fffccc;
      border:1px solid #000;
      padding:3px;
      position:relative;
      z-index:1;
      display:inline;
  }
  ul.links {
      list-style:none;
      margin:0 20px;
      padding:0;
      border:1px solid #000;
      border-bottom:none;
      width:100px;
  }
  .links li {
      width:100px;
      background:blue;
      color:#fff;
      border-bottom:1px solid #000;
  }
  .links li a {
      display:block;
      width:90px;
      padding:5px;
      background:blue;
      color:#fff;
      text-decoration:none;
  }
  .links li a span, .links li a b {
      position:absolute;
      right:24px;
      top:-999em;
      width:500px;
      height:400px;
      z-index:2;
  }
  .links li a span img {
      display:block;
      margin:0 0 5px
  }
  .links li a:hover, .links li.over a {
      background:teal;
      color:#000;
      visibility:visible;
  }
  .links li a:hover span, .links li.over a span { top:100px; }
  .links li a:hover b, .links li.over a b {
      top:200px;
      left:50px;
      height:auto;
  }
  h1 {
      text-align:center;
      margin:1em 0;
  }
  &lt;/style&gt;
  &lt;/head&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="outer2"&gt;
          &lt;b&gt;list moves here&lt;/b&gt;
      &lt;div class="outer"&gt;
          &lt;p class="image-holder"&gt;&lt;img src="https://lol.html" width="500" height="400" alt="Image Goes Here" /&gt;&lt;/p&gt;
          &lt;ul id="all" class="links"&gt;
              &lt;li&gt;&lt;input type="checkbox" id="list_all" class="list_all" onClick="toggle_show('all')"&gt; List all&lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul id="over" class="links"&gt;
              &lt;li&gt;&lt;a href="https://google.com"&gt;Google&lt;span&gt;&lt;img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="500" height="400" alt="NWS" /&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;    
              &lt;li&gt;&lt;a href="https://www.yahoo.com"&gt;Yahoo&lt;span&gt;&lt;img src="https://s.yimg.com/rz/p/yahoo_homepage_en-US_s_f_p_bestfit_homepage.png" width="500" height="400" alt="SPC" /&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              
          &lt;/ul&gt;       
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://jsfiddle.net/qbrnuwe6/6/" rel="nofollow noreferrer">https://jsfiddle.net/qbrnuwe6/6/</a></p>
  <p>One can hover over 'Google', and an image appears in the box in the bottom-right. Similarly, if one hovers over 'Yahoo', a different image appears in the box in the bottom-right.</p>
  <p>However, now, I want to create a checkbox that, when checked, the list of 'Google' and 'Yahoo' will appear outside of the 'inner box' and populate the area where it says 'list moves here'. I was hoping this could be achieved by some function such as:</p>
  <pre><code>&lt;input type=&quot;checkbox&quot; id=&quot;list_all&quot; class=&quot;list_all&quot; onClick=&quot;toggle_show('all')&quot;&gt; List all
  </code></pre>
  <p>One should be able to still hover over 'Google' and 'Yahoo' to make the image appear in the bottom-right For some reason I am stuck on how to move the list properly. I am not sure if this would work better with HTML, Java, or CSS, so any sort of help would be appreciated.</p>