D3 Examples - pure css grid zoom boxes

xxxxxxxxxx
 
​
<ul class="tabs">
  <li>
    <input class="toggle-radio" type="radio" name="facegroup" id="management" checked>
    <label class="tab" for="management">Management</label>
    <div class="tab-panel">
      <input class="toggle-checkbox" type="checkbox" id="a">
      <label class="element" for="a">
        <h3><span class="name">Cathy</span>
          <span class="job">Master Stylist</span></h3>
        <figure class="photo"><img src="https://lorempixel.com/460/330/people/1"></figure>
        <p class="bio">
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
        </p>
      </label>
      <input class="toggle-checkbox" type="checkbox" id="b">
      <label class="element" for="b">
        <h3><span class="name">Gia</span>
          <span class="job">Stylist</span></h3>
        <figure class="photo"><img src="https://lorempixel.com/460/330/people/2"></figure>
        <p class="bio">
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
        </p>
      </label>
      <input class="toggle-checkbox" type="checkbox" id="c">
      <label class="element" for="c">
        <h3><span class="name">Jennifer</span>
          <span class="job">Stylist</span></h3>
        <figure class="photo"><img src="https://lorempixel.com/460/330/people/3"></figure>
        <p class="bio">
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
        </p>
      </label>
      <input class="toggle-checkbox" type="checkbox" id="d">
      <label class="element" for="d">
        <h3><span class="name">Jean-Michel</span>
          <span class="job">Master Stylist</span></h3>
        <figure class="photo"><img src="https://lorempixel.com/460/330/people/4"></figure>
        <p class="bio">
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
        </p>
      </label>
      <input class="toggle-checkbox" type="checkbox" id="f">
      <label class="element" for="f">
        <h3><span class="name">Tammy</span>
          <span class="job">Stylist</span></h3>
        <figure class="photo"><img src="https://lorempixel.com/460/330/people/5"></figure>
        <p class="bio">
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
        </p>
      </label>
      <input class="toggle-checkbox" type="checkbox" id="g">
      <label class="element" for="g">
        <h3><span class="name">Troy</span>
          <span class="job">Master Stylist</span></h3>
        <figure class="photo"><img src="https://lorempixel.com/460/330/people/6"></figure>
        <p class="bio">
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
          The quick brown fox jumps over the lazy dog. 
        </p>
      </label>
    </div>
  </li>
  <li>
    <input class="toggle-radio" type="radio" name="facegroup" id="hair">
    <label class="tab" for="hair">Hair</label>
  </li>
  <li>
    <input class="toggle-radio" type="radio" name="facegroup" id="color">
    <label class="tab" for="color">Color</label>
  </li>
  <li>
    <input class="toggle-radio" type="radio" name="facegroup" id="face">
    <label class="tab" for="face">Face</label>
  </li>
  <li>
    <input class="toggle-radio" type="radio" name="facegroup" id="nails">
    <label class="tab" for="nails">Nails</label>
  </li>
  <li>
    <input class="toggle-radio" type="radio" name="facegroup" id="support">
    <label class="tab" for="support">Support</label>
  </li>
</ul>
​
    