div.frame
	figure
		div.image-1
		- for (var i = 1; i <= 8; i++)
			div.image-2
	div.text
		p Slice
		p Transition	

* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,400);

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
	overflow: hidden;
  background: #fff;
  color: #333;
	font-family: 'Open Sans', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.text {
	position:absolute;
	pointer-events:none;
	color: black;
	font-size:2.5rem;
	font-weight: 700;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	text-align:center;
	text-transform:uppercase;
	transition: all 0.2s ease-in-out;
	p:nth-child(1) {
		font-size:4rem;
		
	}	
}

figure {
	 width:100%;
	height:100%;
	
	.image-1 {
		width: 100%;
		height: 100%;
		position:absolute;
		background-image: url(https://source.unsplash.com/kqLYY1jtafM);
		background-repeat:no-repeat;
		background-size:cover;
		top: 0;
		left:0;
    transition: all 1s ease-in-out;
	}
	.image-2 {
		display:inline-block;
		width:50px;
		height: 100%;
		position:absolute;
		top: 0;
		opacity:0;

		background-image:url(https://source.unsplash.com/63JKK67yGUE);
		background-size: cover;
		background-repeat:no-repeat;
		background-size:cover;

		transition: all 1s ease-in-out;
	}		
	
	&:hover {
		.image-2 {
			opacity: 1;
			transform: translate(0) !important;
		}
		+.text {
			color: white;
		}
		
	}
	
	
	.image-2:nth-child(2) {
		background-position: 0px 0px;
		left:0px;
		transform: translateY(60px);
	}
	
	.image-2:nth-child(3) {
		background-position: -50px 0;
		left:50px;
		transform: translateY(-60px);
	}
	
	.image-2:nth-child(4) {
		background-position: -100px 0;
		left:100px;
		transform: translateY(60px);
	}
	
	.image-2:nth-child(5) {
		left:150px;
		background-position: -150px 0;
		transform: translateY(-60px);
	}
	
	.image-2:nth-child(6) {
		left: 200px;
		background-position: -200px 0;
		transform: translateY(60px);
	}
	
	.image-2:nth-child(7) {
		left:250px;
		background-position: -250px 0;
		transform: translateY(-60px);
	}
	
	.image-2:nth-child(8) {
		left:300px;
		background-position: -300px 0;
		transform: translateY(60px);
	}
	
	.image-2:nth-child(9) {
		left: 350px;
		background-position: -350px 0;
		transform: translateY(-60px);
	}
}

// jQuery v3.3.1 is supported