html, body{
    height: 100%;
    margin: 0;box-sizing: border-box;
}
h1{
    display: block;
	font-family: fantasy;
	font-size: 50px;
	text-transform: uppercase;
	text-align: center;
    color: rgb(218, 50, 50);
    top: 200px;
    
}
img{
	display: block;
	position: absolute;
	filter:grayscale(100%);
	top: 80px;
	left: calc(50% - 125px);
	width: 250px;
	height: 300px;
	transition: all 1.5s;
}

img:hover{
	filter:grayscale(0%);

}
img.two{
    height: 300px;
    width: 300px;
    top: 270px;

}
#first{
	top: 200px;
	transform: translateX(-80px);
	transform: rotate(-150deg);
	z-index: -1;
}

#first:hover{
	transform: translate();
}

#second{
	top: 200px;
    transform: translateX(80px);
    transform: rotate(150deg);
    z-index: -1;
}

#wrap{
	height: 400px;
}
#wrap:hover img{
	filter:grayscale(0%);

}
#wrap:hover #first{
   transform:translate(500px); 
}

#wrap:hover #second{
   transform:translate(-500px); 
}