<div id="outspace">
		<div class="goal">
			
		</div>
		<div class="box">
			
		</div>
	</div>
#outspace{
	position:relative;
	height:22em;
	background-color:#E0E0E0;
	transition:3s ease-in-out;
}
.goal{
	position:absolute;
	bottom:14.80em;
	left:38.75em;
	border:2px solid black;
	height:6.5em;
	width:6.5em;
	margin:0;
	padding:0;
	transition:3s ease-in-out;
}
.box{
	position:absolute;
	bottom:0;
	left:0;
	width:4em;	
	height:4em;
    border:2px solid #1abc9c;
    text-align:center;
    display:inline-block;
    margin:0;
    padding:0;
    transition:3s ease-in-out;
}

/*animation*/
#outspace:hover .box{
	-webkit-transform:translate(40em,-16em) rotate(360deg) scale(1.5,1.5);
	-ms-transform:translate(40em,-16em) rotate(360deg) scale(1.5,1.5);
	-moz-transform:translate(40em,-16em) rotate(360deg) scale(1.5,1.5);
	-o-transform:translate(40em,-16em) rotate(360deg) scale(1.5,1.5);
	transform:translate(40em,-16em) rotate(360deg) scale(1.5,1.5);
	border:2px solid black;
	background:#1abc9c;
}
#outspace:hover{
	background:orange;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.