Controlling the timing/delay of multiple CSS transitions

I'm working on a site where I have three divs, and when I hover over any one of them, I would like the div to extend in length and then I would like the text to change.

Currently, I've got it so that the div extends and the text changes at the same time. I can't figure out how to make the text change occur after the div finishes animating. I've tried adding this piece of code transition: .2s .2s; to every class and id but nothing seems to work. Any ideas?

Here's a link to the page: http://ift.tt/1QaI13l

And here's the code:
HTML:

<div class="boxes">
    <div class="box1">
        <div id="create-box" class="about-box"><span class="box-span">Create</span></div>
    </div>
    <div class="box2">
        <div id="produce-box" class="about-box"><span class="box-span">Produce</span></div>
    </div>
    <div class="box3">
        <div id="collab-box" class="about-box"><span class="box-span">Collaborate</span></div>
    </div>
</div>

CSS:

.boxes{
   padding-top: 50px;
   text-align: center;
   font-family: Arial;
}
.about-box{
   height: 20px;
   display: inline-block;
   width: 150px;
   padding: 20px;
   color: white;
   background-color: black;
   margin: 10px 10px 0 10px;
   -o-transition:.2s;
   -ms-transition:.2s;
   -moz-transition:.2s;
   -webkit-transition:.2s;
   transition:.2s;
}
.about-box:hover{
   width: 300px;
}
.box1,.box2,.box3{
   display: inline;
}
.box1:hover #create-box span{
   display: none;
}
.box1:hover #create-box:after{
   content: 'Create visual designs & interactive media';
}
.box2:hover #produce-box span{
   display: none;
}
.box2:hover #produce-box:after{
   content: 'Produce / Manufacture clothing pieces';
}
.box3:hover #collab-box span{
   display: none;
}
.box3:hover #collab-box:after{
   content: 'Collaborate on diverse creative projects';
}