title: Make nested div full screen
body: <p>Any idea how to stretch the thumbnail div to be full screen? I've tried a couple of methods and the closest I got to my desired output was by setting the innerHTML of the parent div with class container with the contents of the hidden div, but I still have to revert it and add some animations to not have the change so abrupt. Basically I want the Thumbnail div to rotate on Y axis and on its back some info can be found. Upon completion of the Y rotation I want it to go full screen(like a popup) and have a X button to close and get everything back to normal.</p>
  
  <p>Below is the HTML, CSS and JS(didn't add the entire HTML, it would've been redundant)</p>
  
  <pre><code>&lt;div class="container"&gt;
  
      &lt;div class="info-review"&gt;
          &lt;p&gt;Latest Version: 6.2.4&lt;br/&gt;
          Catia&lt;br/&gt;
          Last : 02.07.2013&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="row flex"&gt;
  
          &lt;div class="col-lg-3 col-md-4 col-sm-6"&gt;
              &lt;div class="thumbnail"&gt;                 
                  &lt;img src="assets/img/Contact.jpg"&gt;  
                  &lt;p&gt;1&lt;sup&gt;st&lt;/sup&gt; level support&lt;div class="boxed-plus" aria-hidden="true"&gt;&lt;/div&gt;&lt;/p&gt;        
              &lt;/div&gt;                      
          &lt;/div&gt;      
  
          &lt;div class="col-lg-3 col-md-4 col-sm-6"&gt;
              &lt;div class="thumbnail"&gt;                 
                  &lt;img src="assets/img/support.jpg"&gt;  
                  &lt;p&gt;1&lt;sup&gt;st&lt;/sup&gt; level support&lt;div class="boxed-plus" aria-hidden="true"&gt;&lt;/div&gt;&lt;/p&gt;            
              &lt;/div&gt;                      
          &lt;/div&gt;  
  
          &lt;div class="col-lg-3 col-md-4 col-sm-6"&gt;
              &lt;div class="thumbnail"&gt;                 
                  &lt;img src="assets/img/license.jpg"&gt;
                      &lt;p&gt;1&lt;sup&gt;st&lt;/sup&gt; level support&lt;div class="boxed-plus" aria-hidden="true"&gt;&lt;/div&gt;&lt;/p&gt;    
              &lt;/div&gt;                      
          &lt;/div&gt;
  
          &lt;div class="col-lg-3 col-md-4 col-sm-6"&gt;
              &lt;div class="thumbnail"&gt;                 
                  &lt;img src="assets/img/application.jpg"&gt;  
                  &lt;p&gt;1&lt;sup&gt;st&lt;/sup&gt; level support&lt;div class="boxed-plus" aria-hidden="true"&gt;&lt;/div&gt;&lt;/p&gt;            
              &lt;/div&gt;                      
          &lt;/div&gt;
  
      &lt;/div&gt; &lt;!-- row --&gt;
  
  &lt;/div&gt; &lt;!-- container --&gt;
  
  &lt;div id="info1"&gt;&lt;p&gt;         BASE: ENGAGE IN THE HOME CARE-RELATED ACTIVITY  (H_HOMEACTIVITIES=6)16_6. What do you do first in order to...? Select one.Look for inspiration (e.g., for closet organization)ONLY SHOW IF SELECTED AT Q15_6. SHOW IN SAME ORDER.IF ONLY ONE ANSWER SELECTED FOR ITEM/QUESTION AT Q15_6, AUTOCODE THAT OPTION AT HERE AND DO NOT SHOW THIS QUESTION.&lt;div class="boxed-plus" aria-hidden="true"&gt;&lt;/div&gt;   &lt;/p&gt;    &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>* {
      box-sizing: border-box;
  }
  
  html {
      height: 100%;
      width: 100%;
  }
  
  body {
      margin: 0;
      height: 100%;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      padding-top: 115px;
      background: #143872;  /* fallback for old browsers */
      background: -webkit-linear-gradient(#1d355b, #4a83e0, #143872);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(#1d355b, #4a83e0, #143872); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
  
  .container {
      width: 95%;
      margin-left: auto;
      margin-right: auto;
      padding-right: 15px;
      padding-left: 15px;
  }
  
  .navbar {
      overflow: hidden;
      background-color: inherit;
      margin-bottom: 20px;
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 1030;
      border-bottom-left-radius: 10px;  
      border-bottom-right-radius: 10px;
      border-top: none;
      background: #143872;  /* fallback for old browsers */
      background: -webkit-linear-gradient(#1d355b, #4a83e0, #143872);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(#1d355b, #4a83e0, #143872); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
  
  @media(max-width: 600px){
      .navbar{
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0; 
      }
  }
  
  .navbar a {
      float: left;
      font-size: 15px;
      color: white;
      text-align: center;
      padding: 14px 14px 16px 0;
      text-decoration: none;
      vertical-align: middle;
  }
  
  .navbar-header table{
      text-align: left;
      font-size: 18px;
      line-height: 1;
  }
  
  .navbar a:hover {
      color: #10203a;
  }
  
  .navbar-right{
      float: right;
  }
  
  .navbar a img{
      float:left;
  }
  
  .dropmenu{
      transition: all .5s ease;
      height: 50px;
      overflow: hidden;
      padding: 0;
      display: inline-block;
  }
  
  @media(max-width: 547px){
      .navbar a{
          padding: 0;
      }
      .navbar-right{
          float: none;
      }
      .dropmenu{
          margin: 0;
      }
  }
  
  .dropmenu:hover {
      height: 100px;
  }
  
  .dropmenu a{
      text-decoration: none;
      color: white;
      padding: 0;
  }
  
  .dropmenu table{
      height: 50px;
  }
  
  .lang{
      padding-bottom: 10px;
  }
  
  .dropmenu li{
      display: block;
      border: none;
      padding: 0;
      height: 50px;
  }
  
  .info-review{
      padding: 0 15px;
      text-align: center;
      margin: 0 auto 30px auto;
      border-radius: 6px;
      color: white;
      border: 1px dashed white;
      border-top-left-radius: 85px;
      border-bottom-right-radius: 85px;
  }
  
  @media(min-width: 500px){
      .container .info-review{
          width: 40%;
      }
  }
  
  .info-review p{
      margin-bottom: 15px;
      font-size: 30px;
      line-height: 1.4;
  }
  
  @media(max-width: 900px){
      .info-review p{
          font-size: 25px;
      }
  }
  
  .arrow-down {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;  
    border-top: 5px solid white;
  }
  
  .selection-arrow {
      padding-top: 17px;
  }
  
  .thumbnail {
      overflow: auto;
      display: block;
      padding: 4px;
      margin-bottom: 20px;
      border: 1px solid #ddd;
      border-radius: 4px;
      -webkit-transition: border .2s ease-in-out;
           -o-transition: border .2s ease-in-out;
              transition: border .2s ease-in-out;
      -webkit-transform: perspective(500);
      -webkit-transform-style: preserve-3d;
      -webkit-transition: .5s;
  }
  
  .thumbnail &gt; img {
      display: block;
      height: auto;
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
      border-radius: 6px;
  }
  
  .thumbnail p{
      color:white;
      margin: 2px 0 0 0;
      float: left;
  }
  
  .thumbnail &gt; div{
      max-width: 100%;
  }
  
  .row {
      margin-left: -15px;
      margin-right: -15px;
  }
  
  .flex { 
    display: flex; 
    flex-wrap: wrap;  
  } 
  
  .col-md-4, .col-lg-3, .col-sm-6{
      float: left;
      position: relative;
      min-height: 1px;
      padding-left: 15px;
      padding-right: 15px;
  }
  
  @media(min-width: 600px){
      .col-sm-6{
          width: 50%;
      }
  }
  
  @media(min-width: 900px){
      .col-md-4{
          width: 33.33333333%;
      }
  }
  
  @media (min-width: 1200px){
      .col-lg-3{
          width: 25%;
      }
  }
  
  .white-popup {
    position: relative;
    background: #FFF;
    padding: 25px;
    width:auto;
    max-width: 400px;
    margin: 0 auto; 
  }
  
  .active {
      background-color: white;
      -webkit-transform: rotateY(180deg) translateY(-3em) translateZ(3em);
  }
  
  .active &gt; p {
      -webkit-transform: rotateY(-180deg);
      color: red;
      -webkit-transition: .5s;
      float: right;
  }
  
  img {
      -webkit-transition: .5s;
  }
  figure:hover img {
      box-shadow: none;
  }
  figcaption {
      background-color: white;
      visibility: hidden;
      border: 1px dashed white;
  
      z-index: 99 !important;
  }
  figure:hover figcaption {
      visibility: visible;
      box-shadow: 0 20px 15px -10px hsla(0,0%,0%,.25);
      margin: 100px auto;
  }
  
  .boxed-plus {
      cursor: pointer;
      float: right;
      border-radius: 20%;
      width: 25px;
      height: 25px;
      background: #143872;  /* fallback for old browsers */
      background: -webkit-linear-gradient(#1d355b, #4a83e0, #143872);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(#1d355b, #4a83e0, #143872); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */  
      position: relative;
      display: inline-block;
      margin-top: 1px;
  }
  .boxed-plus::after {
    content: " ";
    position: absolute;
    display: block;
    background-color: #fff;
    height: 5px;
    margin-top: -2.5px;
    top: 50%;
    left: 5px;
    right: 5px;
    z-index: 9;
  }
  .boxed-plus::before {
    content: " ";
    position: absolute;
    display: block;
    background-color: #fff;
    width: 5px;
    margin-left: -2.5px;
    left: 50%;
    top: 5px;
    bottom: 5px;
    z-index: 9;
  }
  
  .activity {
      -webkit-transform: rotateX(90deg);
  }
  
  #info1{
      visibility: hidden;
      background-color: white;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var plus_clicked = document.querySelectorAll('.boxed-plus');
  var info_1 = document.getElementById('info1');
  var clicked = false;
  
  plus_clicked.forEach(function(e){
      e.addEventListener('click',function(){
          if(clicked === false){
              var previous_html = e.parentNode.parentNode.parentNode.parentNode.innerHTML;
              clicked === true;
              e.classList.add('activity');
              this.parentNode.classList.add('active');
  
              setTimeout(function(){
                  console.log(e.parentNode.innerHTML);
                  //e.parentNode.innerHTML = info_1.innerHTML;
                  e.parentNode.parentNode.parentNode.parentNode.innerHTML = info_1.innerHTML;
              }, 300);
  
              console.log(this.parentNode.parentNode.parentNode.parentNode);
      }else{
          e.innerHTML = previous_html;
      }
      });
  })
  </code></pre>