CodePen Embed - 3D Slider & Popup & background Video

.container
	.bg-video
		//↓ 是影片時使用 ↓
		video(poster="http://www.weypro.com/demo/CC0/video/CC0_cat_video.png", autoplay, loop, muted, playsinline)
			source(src="http://www.weypro.com/demo/CC0/video/CC0_cat_video.mp4" type="video/mp4")
		//↑ 是影片時使用 ↑
		//↓ 是gif時使用 ↓
		// <div class="gifImg" style="background-image: url(https://i.giphy.com/FrEnONcaBGJ0c.gif);"></div>
		//↑ 是gif時使用 ↑
	.showcase
		h2 SHOWCASE
		.showcase-slider
			ul.slider
				each i inArray(5)
					li.slide
						a.popup-img(href="https://picsum.photos/800/600")
							img(src="https://picsum.photos/800/600")
							h3 Case Title 1 Case Title 1 Case Title 1 Case Title 1
					li.slide
						a.popup-video(href="http://www.youtube.com/watch?v=0O2aH4XLbto")
							img(src="https://picsum.photos/800/600/?random")
							h3 Case Title 2 Case Title 2 Case Title 2 Case Title 2

View Compiled

.container {
	position: relative;
	min-height: 100vh;
	padding: 2em 0;
	box-sizing: border-box;
	background-color: gray;
	> * {
		position: relative;
		z-index: 1;
	}
}
.bg-video {
	position: absolute;
	z-index: 0;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
	video {
		position: absolute;
		top: 50%;
		left: 50%;
		width: auto;
		height: auto;
		min-width: 100%;
		min-height: 100%;
		transform: translate(-50%, -50%);
		background-repeat: no-repeat;
  		background-size: cover;
	}
	.gifImg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
}
.showcase {
	text-align: center;
	h2 {
		margin: 0 0 2rem;
		color: white;
	}
	.showcase-slider {
		.flipster__item {
			perspective: none;
			.flipster__item__content {
				box-reflect: inherit;
				-webkit-box-reflect: inherit;
			}
			&--future,
			&--past {
				.flipster__item__content {
					transform: translateY(10%);
				}
			}
		}
		.flipster__button {
			width: 44px;
			margin: 0;
			opacity: 0.75;
			transform: translateY(-50%);
			&:hover {
				opacity: 1;
			}
			&:focus {
				outline: none;
			}
			img {
				display: block;
				width: 100%;
			}
			&--prev {
				left: 5vw;
			}
			&--next {
				right: 5vw;
			}
		}
	}
	.slider {
		.slide {
			width: 90vw;
			a {
				position: relative;
				display: block;
				padding: 10px;
				box-sizing: border-box;
				background-color: #505050;
				color: white;
				text-decoration: none;
				pointer-events: none;
				&:before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			&.flipster__item--current {
				box-shadow: 3px 3px 7px rgba(0,0,0,0.35);
				a {
					pointer-events: visible;
				}
			}
			&.flipster__item--future {
				a:before {
					background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
					background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,0,0,1)), color-stop(60%, rgba(0,0,0,0)));
					background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
					background: -o-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
					background: -ms-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
					background: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=1 );
				}
			}
			&.flipster__item--past {
				a:before {
					background: -moz-linear-gradient(left, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 100%);
					background: -webkit-gradient(left top, right top, color-stop(40%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,1)));
					background: -webkit-linear-gradient(left, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 100%);
					background: -o-linear-gradient(left, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 100%);
					background: -ms-linear-gradient(left, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 100%);
					background: linear-gradient(to right, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 100%);
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=1 );
				}
			}
		}
		img {
			display: block;
			max-width: 100%;
			margin: 0 auto 10px;
		}
		h3 {
			margin: 0;
			padding: 1.5em 1em;
			box-sizing: border-box;
			font-family: 'Arial', sans-serif;
			font-weight: 400;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			font-size: 1.125em;
			line-height: 1.2;
		}
	}
}

@media screen and (min-width: 768px) {
	.showcase {
		.showcase-slider {
			.flipster__button {
				width: 80px;
				&--prev {
					left: 10vw;
					transform: translate(-50%, -50%);
				}
				&--next {
					right: 10vw;
					transform: translate(50%, -50%);
				}
			}
		}
		.slider {
			.slide {
				width: 60vw;
				h3 {
					font-size: 1.5em;
				}
			}
		}
	}
}

@media screen and (min-width: 1024px) {
	.showcase {
		.showcase-slider {
			.flipster__button {
				width: 128px;
				&--prev {
					left: 14.5vw;
				}
				&--next {
					right: 14.5vw;
				}
			}
		}
		.slider {
			.slide {
				width: 42vw;
			}
		}
	}
}

@media screen and (min-width: 1280px) {
	.showcase {
		.slider {
			.slide {
				h3 {
					font-size: 1.875em;
				}
			}
		}
	}
}


/* 
for zoom animation 
uncomment this part if you haven't added this code anywhere else
*/
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
	opacity: 0;
	transition: all 0.3s ease-out;
}
.mfp-with-zoom.mfp-ready .mfp-container {
		opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
		opacity: 0.8;
}
.mfp-with-zoom.mfp-removing .mfp-container, 
.mfp-with-zoom.mfp-removing.mfp-bg {
	opacity: 0;
}

View Compiled

$(function () {
	//https://github.com/drien/jquery-flipster/
	$('.showcase-slider').flipster({
		itemContainer: '.slider',
		itemSelector: '.slide',
		start: 0,
		loop: false,
		spacing: -0.31,
		scrollwheel: false,
		buttons: 'custom',
		loop: true,
		buttonPrev: '<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEyOHB4IiBoZWlnaHQ9IjEyOHB4IiB2aWV3Qm94PSIwIDAgMjg0LjkzNSAyODQuOTM2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyODQuOTM1IDI4NC45MzY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cGF0aCBkPSJNMTEwLjQ4OCwxNDIuNDY4TDIyMi42OTQsMzAuMjY0YzEuOTAyLTEuOTAzLDIuODU0LTQuMDkzLDIuODU0LTYuNTY3YzAtMi40NzQtMC45NTEtNC42NjQtMi44NTQtNi41NjNMMjA4LjQxNywyLjg1NyAgIEMyMDYuNTEzLDAuOTU1LDIwNC4zMjQsMCwyMDEuODU2LDBjLTIuNDc1LDAtNC42NjQsMC45NTUtNi41NjcsMi44NTdMNjIuMjQsMTM1LjljLTEuOTAzLDEuOTAzLTIuODUyLDQuMDkzLTIuODUyLDYuNTY3ICAgYzAsMi40NzUsMC45NDksNC42NjQsMi44NTIsNi41NjdsMTMzLjA0MiwxMzMuMDQzYzEuOTA2LDEuOTA2LDQuMDk3LDIuODU3LDYuNTcxLDIuODU3YzIuNDcxLDAsNC42Ni0wLjk1MSw2LjU2My0yLjg1NyAgIGwxNC4yNzctMTQuMjY3YzEuOTAyLTEuOTAzLDIuODUxLTQuMDk0LDIuODUxLTYuNTdjMC0yLjQ3Mi0wLjk0OC00LjY2MS0yLjg1MS02LjU2NEwxMTAuNDg4LDE0Mi40Njh6IiBmaWxsPSIjOTY5Njk2Ii8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" />',
		buttonNext: '<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEyOHB4IiBoZWlnaHQ9IjEyOHB4IiB2aWV3Qm94PSIwIDAgMjg0LjkzNSAyODQuOTM2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyODQuOTM1IDI4NC45MzY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cGF0aCBkPSJNMjIyLjcwMSwxMzUuOUw4OS42NTIsMi44NTdDODcuNzQ4LDAuOTU1LDg1LjU1NywwLDgzLjA4NCwwYy0yLjQ3NCwwLTQuNjY0LDAuOTU1LTYuNTY3LDIuODU3TDYyLjI0NCwxNy4xMzMgICBjLTEuOTA2LDEuOTAzLTIuODU1LDQuMDg5LTIuODU1LDYuNTY3YzAsMi40NzgsMC45NDksNC42NjQsMi44NTUsNi41NjdsMTEyLjIwNCwxMTIuMjA0TDYyLjI0NCwyNTQuNjc3ICAgYy0xLjkwNiwxLjkwMy0yLjg1NSw0LjA5My0yLjg1NSw2LjU2NGMwLDIuNDc3LDAuOTQ5LDQuNjY3LDIuODU1LDYuNTdsMTQuMjc0LDE0LjI3MWMxLjkwMywxLjkwNSw0LjA5MywyLjg1NCw2LjU2NywyLjg1NCAgIGMyLjQ3MywwLDQuNjYzLTAuOTUxLDYuNTY3LTIuODU0bDEzMy4wNDItMTMzLjA0NGMxLjkwMi0xLjkwMiwyLjg1NC00LjA5MywyLjg1NC02LjU2N1MyMjQuNjAzLDEzNy44MDcsMjIyLjcwMSwxMzUuOXoiIGZpbGw9IiM5Njk2OTYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />'
	});
	
	//http://dimsemenov.com/plugins/magnific-popup
	$('.popup-img').magnificPopup({
		type: 'image',
		closeOnContentClick: true,
		mainClass: 'mfp-with-zoom',
		image: {
			verticalFit: false
		},
		zoom: {
			enabled: true,
			duration: 300 // don't foget to change the duration also in CSS
		}
	});
	$('.popup-video').magnificPopup({
		disableOn: 700,
		type: 'iframe',
		closeOnContentClick: true,
		removalDelay: 160,
		preloader: false,
		fixedContentPos: false,
		mainClass: 'mfp-with-zoom',
		zoom: {
			enabled: true,
			duration: 300 // don't foget to change the duration also in CSS
		}
	});
})

This Pen is owned by Jessie on CodePen.

See more by @Jessie_Liu on CodePen

External CSS

External JavaScript