You can achieve insanely complex interactivity without Javascript by utilizing CSS sibling selectors (~ or +). Here, hovering the parent grid snaps 4 staggered children inwards to complete a square!

Translating the Pieces

.container:hover .piece-top-left { transform: translate(10px, 10px); }
.container:hover .piece-top-right { transform: translate(-10px, 10px); }
.container:hover .piece-btm-left { transform: translate(10px, -10px); }
.container:hover .piece-btm-right { transform: translate(-10px, -10px); }

By heavily buffering the clip-path shapes of each quadrant, the movement perfectly locks them together. Hover the shattered blocks in the Live Demo to assemble them!