css

#playground{
background:silver;
width:40em;
height:40em;
position:relative;
overflow:hidden;}



#playground > #cat{
position:absolute;
top:10em;
left:-10em;
width:10em;
height:12em;
transition:0.1s;
opacity:0;
}


#playground:hover > #cat{
left:10em;
top:10em;
opacity:1;
transition:3s;}

#playground > #dog{
position:absolute;
top:10em;
left:40em;
width:10em;
height:12em;
transition:0.1s;
opacity:0;
}


#playground:hover > #dog{
left:20em;
top:10em;
opacity:1;
transition:3s;}

#playground > #boom{
position:absolute;
top:10em;
left:10em;
width:20em;
height:12em;
transition:0.1s;

opacity:0;
}


#playground:hover > #boom{
left:10em;
top:10em;
opacity:1;
transition:3s;
transition-delay:2s;}

#playground > #catdog{
position:absolute;
top:10em;
left:10em;
width:20em;
height:12em;
transition:0.1s;
opacity:0;
}


#playground:hover > #catdog{
left:10em;
top:10em;
opacity:1;
transition:3s;
transition-delay:2.5s;}