Animated expanding div to full screen? [on hold]

I have three different div elements (within several other divs) that i want to expand to full screen smoothly when clicked upon with additional information showing.

<div class="page3">
        <div class="page3content">
            <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 and Achievements</a>
            </div>
        </div>
    </div>

and the CSS:

Here's the code for the section:

.page3 {
border: 1px dashed yellow;
width: auto;
height: 99.6vh;
min-height: 100%;
text-align: center;
}

.page3content {
width: 99%;
height: 50%;
border: 1px dashed #4cc972;
margin-top: 12.5%;
margin-left: auto;
margin-right: auto;
}

.column {
width: 27.5%;
height: 100%;
border: 1px dashed #dc143c;
display: inline-block;
vertical-align: top;
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;
}

Here's a screenshot of what it looks like (the borders are just to make each element visible:) http://ift.tt/1E1KhXn

I want to be able to click on one of the boxes, then have it smoothly expand to fill the screen, revealing additional content.

An example of what I'm looking for is here: http://ift.tt/1gvmIWG) The github hasn't been helpful to me as I cannot find where the expansion occurs.