image split on hover

<!-- full code @ https://codepen.io/tubbox/pen/qBjzWJb -->

<style>#top {transform:translate(0,1.5em); transition:0.3s;}

#bottom {transition:0.3s; transform:translate(0,-1.5em);}

#split:hover #top {transform:translate(0,0em); transition:0.3s;}

 #split:hover #bottom {transform:translate(0,0em); transition:0.3s;}</style>

<style>#right{transform:translate(6em, -11em); transition:0.3s;}

#left {transition:0.3s;
transform:translate(-6em, 10em);}

#break:hover #right {transform:translate(7.5em, -11em); transition:0.3s;}

#break:hover #left{transform:translate(-7.5em, 10em);transition:0.3s;}</style>