Animated menu with shapes

I'm trying to figure out the best way to build an animated menu. Please, see the following image for better understanding: Animated hexagonal menu

The way it works is similar to this example: http://ift.tt/1pqaOnE

The hexagon burger button is in the center. Once clicked, it reveals the triangular shapes surrounding the burger button. The latter transformed into a cross to reverse the process and hide everything back to the how it started.

My picture is actually missing one step in the very beginning. The first picture should only show the burger button just as the codepen demo.

So my question is the following. Could you please me advise me on how you would build this animation from HTML to CSS through jQuery and others. What techniques would you use to make it happen. Keep in mind that whereas the codepen example is featuring simple icons, mine features triangular pictures which once hovered reveal a title with subtitle.

Thank you in advance for all your insights.