javascript - Animated Div expand to full screen -

i have 3 divs in html. end result want on click each div expand smoothly fill entire screen (or parent element full screen) , show additional information when div expanded (for example, on clicking on 'resume' need show more content). want exit button in corner close expanded div.

i don't know javascript or jquery need incorporate. here jsfiddle of html , css

html:

<div class="page3">     <div class="column" id="col1">         <div class="centeringelement"></div>         <a class="resumetitle" href=""><span></span>education</a>     </div>     <div class="column" id="col2">         <div class="centeringelement"></div>         <a class="resumetitle" href=""><span></span>work experience</a>     </div>     <div class="column" id="col3">         <div class="centeringelement"></div>         <a class="resumetitle" href=""><span></span>skills , achievements</a>     </div> </div> 

css:

.page3 {     background: -webkit-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* chrome 10+, saf5.1+ */     background: -moz-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* ff3.6+ */     background: -ms-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* ie10 */     background: -o-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* opera 11.10+ */     background: linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* w3c */     border: 1px dashed yellow;     width: auto;     height: 100%;     min-height: 99.6vh;     text-align: center; }  .column {     width: 42.5vh;     height: 42.5vh;     border: 1px dashed #dc143c;     display: inline-block;     vertical-align: top;     margin-top: 12.5%;     margin-left: 1%;     position: relative;     margin-right: 1%; }  .centeringelement {     height: 45%;     width: auto;     border: 1px dashed white; }  .resumetitle {     vertical-align: middle;     font-size: 1.75em;     margin-top: 0; }  span {     position: absolute;     width: 100%;     height: 100%;     top: 0;     left: 0;     z-index: 1; } 

this example code:

$(document).ready(function(){    $('.column').click(function(){      $(this).css({'width':'100%','margin-left':'0px','margin-right':'0px'});    });  });

.page3 {      background: -webkit-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* chrome 10+, saf5.1+ */      background: -moz-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* ff3.6+ */      background: -ms-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* ie10 */      background: -o-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* opera 11.10+ */      background: linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* w3c */      border: 1px dashed yellow;      width: 100%;      height: 100%;      min-height: 99.6vh;      text-align: center;      }        .column {      width: 42.5vh;      height: 42.5vh;      border: 1px dashed #dc143c;      display: inline-block;      vertical-align: top;      margin-top: 12.5%;      margin-left: 1%;      position: relative;      margin-right: 1%;      }        .centeringelement {      height: 45%;      width: auto;      border: 1px dashed white;      }        .resumetitle {      vertical-align: middle;      font-size: 1.75em;      margin-top: 0;      }      span {      position: absolute;      width: 100%;      height: 100%;      top: 0;      left: 0;      z-index: 1;      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="page3">                  <div class="column" id="col1">                      <div class="centeringelement"></div>                      <a class="resumetitle"><span></span>education</a>                  </div>                  <div class="column" id="col2">                      <div class="centeringelement"></div>                      <a class="resumetitle"><span></span>work experience</a>                  </div>                  <div class="column" id="col3">                      <div class="centeringelement"></div>                      <a class="resumetitle"><span></span>skills , achievements</a>              </div>          </div>