title: jQuery zoom in/out on complete div
body: <p>This is my source code to implement zoom in, zoom out, original size and full screen. It is increasing only width and height of 'list' id but the whole content size is not effected. How to implement for whole content using jQuery. <a href="https://jsfiddle.net/y51s6j6z/3/" rel="nofollow noreferrer">JSFIDDLE</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class='tree'&gt;
  &lt;li id="list"&gt;
    &lt;div class='emplist'&gt;
      &lt;div class='deptRow'&gt;
        &lt;h3&gt;Research &amp; Development&lt;/h3&gt;
      &lt;/div&gt;
      &lt;hr&gt;
      &lt;div class='detailsRow'&gt;
        &lt;div class='detailsCol'&gt;
          &lt;h3 class='empName'&gt;Satayanarayana Rao&lt;/h3&gt;
          &lt;p class='subTitle'&gt;Project Manager
            &lt;br&gt;Hyderabad&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class='imgCol'&gt;&lt;img src='C:/Users/Reddy/Downloads/ragava.jpg' alt='abc' /&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;hr&gt;
      &lt;div class='infoRow'&gt;
        &lt;div class='infoMore'&gt;
          &lt;p&gt;more +5&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class='infoMore pull-right text-right R'&gt;&lt;a href="#" class="btn btn-default btn-xs text-center"&gt;info
  &lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/li&gt;
  
  &lt;/div&gt;
  
  &lt;button id='btn_ZoomIn'&gt;+&lt;/button&gt;
  &lt;button id='btn_ZoomOut'&gt;-&lt;/button&gt;
  &lt;button id='btn_ZoomReset'&gt;1:1&lt;/button&gt;
  &lt;button id='btn_ZoomFull'&gt;Full Screen&lt;/button&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>var resetW = $('#list').width();
  var resetH = $('#list').height();
  
  var currentZoomW = resetW;
  var currentZoomH = resetH;
  
  $('#btn_ZoomReset').on('click', function(){
  
          $('#list').width(resetW);
          $('#list').height(resetH);
  
      });
  //alert(currentZoom);
   $('#btn_ZoomOut').on('click', function(){
          currentZoomW = currentZoomW - 5;
          currentZoomH = currentZoomH - 5;
  
          $('#list').width(currentZoomW);
          $('#list').height(currentZoomH);
  
      });
  
  
    $('#btn_ZoomIn').on('click', function(){
          currentZoomW = currentZoomW + 5;
          currentZoomH = currentZoomH + 5;
  
          $('#list').width(currentZoomW);
          $('#list').height(currentZoomH);
  
      });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>hr{color:#000;}
  .tree{width:450px;height:300px;border:2px dotted #f00;}
  #list{border:1px dashed #000;}
  
  .emplist h3, .emplist p{padding:5px 0px 0px 5px !important;margin:0px !important;}
  .emplist{
      width:360px !important;
      height: 160px !important;
      border:1px solid #aaa;
      border-radius:5px;
      color:#333;
      transition: box-shadow 1s;    
      position:relative;   
      cursor:move;
      !top:50%;
      !left:50%;
  }
  .emplist:hover{box-shadow: 0 0 8px #000;}
  .deptRow, .detailsRow{border-bottom:1px solid #aaa;}
          .deptRow, .infoRow{
              width:100%;
              height:20%;
              float:left;
              font-family: 'Rubik', sans-serif !important;
              color:#00aff0;
          }
  
          .detailsRow{
              float:left;
              width:100%;
              height:55%;
          }
  
          .detailsCol, .imgCol, .infoMore{float:left;height:100%;}
          .detailsCol{width:69%;}
  
          .imgCol{width:30%;}
          .imgCol img{border:1px solid #ccc;margin:5px;}
  
          .infoMore, .infoMoreR{width:50%;font-size:12px;}
          .infoMore p {
              padding-right: 20px;
              float:left;
           }
  
          .R a{margin:5px;}
  
  
          .empName{font-family: 'Josefin Sans', sans-serif;}
          .subTitle{
              !font-family: 'Bilbo', cursive;
              !text-align:right;
              padding-right:20px;
              font-weight:880px;          
              font-family: 'Dekko', cursive;}
  </code></pre>