<div class="container">
	<header class="c-header c-header--archive c-header--project-list">
		<div class="c-mouse-vertical-carousel js-carousel u-media-wrapper u-media-wrapper--16-9">
			<ul class="c-mouse-vertical-carousel__list js-carousel-list">
				<li class="c-mouse-vertical-carousel__list-item js-carousel-list-item" data-item-id="0">
					<a href="">
						<p class="c-mouse-vertical-carousel__eyebrow u-b4">
							<span>
                        01
                    </span> Nevada
						</p>

						<p class="c-mouse-vertical-carousel__title u-a5">
							Carson City
						</p>
					</a>
				</li>

				<li class="c-mouse-vertical-carousel__list-item js-carousel-list-item" data-item-id="1">
					<a href="">
						<p class="c-mouse-vertical-carousel__eyebrow u-b4">
							<span>
                        02
                    </span> New Hampshire
						</p>

						<p class="c-mouse-vertical-carousel__title u-a5">
							Concord
						</p>
					</a>
				</li>

				<li class="c-mouse-vertical-carousel__list-item js-carousel-list-item" data-item-id="2">
					<a href="">
						<p class="c-mouse-vertical-carousel__eyebrow u-b4">
							<span>
                        03
                    </span> New York
						</p>

						<p class="c-mouse-vertical-carousel__title u-a5">
							Albany
						</p>
					</a>
				</li>

				<li class="c-mouse-vertical-carousel__list-item js-carousel-list-item" data-item-id="3">
					<a href="">
						<p class="c-mouse-vertical-carousel__eyebrow u-b4">
							<span>
                        04
                    </span> Oklahoma
						</p>

						<p class="c-mouse-vertical-carousel__title u-a5">
							Oklahoma City
						</p>
					</a>
				</li>

				<li class="c-mouse-vertical-carousel__list-item js-carousel-list-item" data-item-id="4">
					<a href="">
						<p class="c-mouse-vertical-carousel__eyebrow u-b4">
							<span>
                        05
                    </span> North Carolina
						</p>

						<p class="c-mouse-vertical-carousel__title u-a5">
							Raleigh
						</p>
					</a>
				</li>
				
				<li class="c-mouse-vertical-carousel__list-item js-carousel-list-item" data-item-id="5">
					<a href="">
						<p class="c-mouse-vertical-carousel__eyebrow u-b4">
							<span>
                        06
                    </span> Utah
						</p>

						<p class="c-mouse-vertical-carousel__title u-a5">
							Salt Lake City
						</p>
					</a>
				</li>
				
				<li class="c-mouse-vertical-carousel__list-item js-carousel-list-item" data-item-id="6">
					<a href="">
						<p class="c-mouse-vertical-carousel__eyebrow u-b4">
							<span>
                        07
                    </span> Missouri
						</p>

						<p class="c-mouse-vertical-carousel__title u-a5">
							Jefferson City
						</p>
					</a>
				</li>
			</ul>

			<i class="c-mouse-vertical-carousel__bg-img js-carousel-bg-img" style="background-image: url('https://d39d4r6jmh1lz3.cloudfront.net/lass-id-original-1515801602-5a594c029dcd1.jpg')"></i>
			<i class="c-mouse-vertical-carousel__bg-img js-carousel-bg-img" style="background-image: url('https://www.visittheusa.com/sites/default/files/styles/hero_m_1300x700/public/images/hero_media_image/2017-01/Getty_104106362_Brand_State_NewHampshire_Web72DPI.jpg?itok=-D2AFnPq')"></i>
			<i class="c-mouse-vertical-carousel__bg-img js-carousel-bg-img" style="background-image: url('https://lonelyplanetimages.imgix.net/mastheads/GettyImages-538096543_medium.jpg?sharp=10&vib=20&w=1200')"></i>
			<i class="c-mouse-vertical-carousel__bg-img js-carousel-bg-img" style="background-image: url('https://www.gousa.in/sites/default/files/styles/hero_m_1300x700/public/images/hero_media_image/2017-03/f13bafc9dbcd2df659faac33a29cf4ae.jpeg?itok=rj0Zoh1b')"></i>
			<i class="c-mouse-vertical-carousel__bg-img js-carousel-bg-img" style="background-image: url('https://psmag.com/.image/t_share/MTU4NzUzMjc3MDkyMDQ2NTUy/gettyimages-1031626122.jpg')"></i>
			<i class="c-mouse-vertical-carousel__bg-img js-carousel-bg-img" style="background-image: url('https://www.history.com/.image/t_share/MTU3ODc5MDg1ODk1NDYwMTY5/natural-bridge-bryce-canyon-utah-usa.jpg')"></i>
			<i class="c-mouse-vertical-carousel__bg-img js-carousel-bg-img" style="background-image: url('https://www.addictioncenter.com/app/uploads/2018/06/xMissouri.jpeg.pagespeed.ic.9qVaCJN2BK.jpg')"></i>
			<i class="c-gradient-overlay"></i>
		</div>
	</header>
</div>
* {
	margin: 0;
	padding: 0;
}

body {
	color: #fff;
	background-color: #021417;
}

.container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;
	min-height: 100vh;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
}

.c-header {
	display: block;
	width: 100%;
}

.u-a5 {
	font-family: Arial;
	font-size: 37px;
	line-height: 35px;
	letter-spacing: 5px;
	text-transform: uppercase;
	font-weight: 700;
	text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
	color: #fff;
}

.u-b4 {
	font-family: Arial;
	font-size: 12px;
	line-height: 17px;
	letter-spacing: 0.3px;
	font-weight: normal;
	color: #fff;
}

a {
	text-decoration: none;
}

//MEDIA WRAPPER
.u-media-wrapper {
	position: relative;
	width: 100%;
	background-size: cover;
	background-position: center;
	height: 0;

	&#{&}--16-9 {
		padding-bottom: percentage(9/16);
	}
}

// GRADIENT IMAGE OVERLAY
.c-gradient-overlay {
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-image: radial-gradient(
		circle at 49% 50%,
		rgba(2, 21, 25, 0.3),
		rgba(2, 21, 25, 0.6)
	);
}

.c-mouse-vertical-carousel {
	position: relative;
	overflow: hidden;

	&__list {
		width: 100%;
		position: absolute;
		left: 0;
		top: 50%;
		z-index: 1;
	}

	&__list-item {
		a {
			display: block;
			padding-bottom: 25px;
			padding-top: 25px;
			padding-left: percentage(13/24);
		}
	}

	&__eyebrow {
		position: relative;
		padding-bottom: 12px;

		span {
			position: absolute;
			left: -30px;
			top: 2px;
		}
	}

	&__title {
		max-width: 450px;
	}

	&__bg-img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: center;
		will-change: transform;
	}
}
View Compiled
class VerticalMouseDrivenCarousel {
	constructor(options = {}) {
		const _defaults = {
			carousel: ".js-carousel",
			bgImg: ".js-carousel-bg-img",
			list: ".js-carousel-list",
			listItem: ".js-carousel-list-item"
		};

		this.posY = 0;

		this.defaults = Object.assign({}, _defaults, options);

		this.initCursor();
		this.init();
		this.bgImgController();
	}

	//region getters
	getBgImgs() {
		return document.querySelectorAll(this.defaults.bgImg);
	}

	getListItems() {
		return document.querySelectorAll(this.defaults.listItem);
	}

	getList() {
		return document.querySelector(this.defaults.list);
	}

	getCarousel() {
		return document.querySelector(this.defaults.carousel);
	}

	init() {
		TweenMax.set(this.getBgImgs(), {
			autoAlpha: 0,
			scale: 1.05
		});

		TweenMax.set(this.getBgImgs()[0], {
			autoAlpha: 1,
			scale: 1
		});

		this.listItems = this.getListItems().length - 1;
		
		this.listOpacityController(0);
	}

	initCursor() {
		const listHeight = this.getList().clientHeight;
		const carouselHeight = this.getCarousel().clientHeight;

		this.getCarousel().addEventListener(
			"mousemove",
			event => {
				this.posY = event.pageY - this.getCarousel().offsetTop;
				let offset = -this.posY / carouselHeight * listHeight;

				TweenMax.to(this.getList(), 0.3, {
					y: offset,
					ease: Power4.easeOut
				});
			},
			false
		);
	}

	bgImgController() {
		for (const link of this.getListItems()) {
			link.addEventListener("mouseenter", ev => {
				let currentId = ev.currentTarget.dataset.itemId;

				this.listOpacityController(currentId);

				TweenMax.to(ev.currentTarget, 0.3, {
					autoAlpha: 1
				});

				TweenMax.to(".is-visible", 0.2, {
					autoAlpha: 0,
					scale: 1.05
				});

				if (!this.getBgImgs()[currentId].classList.contains("is-visible")) {
					this.getBgImgs()[currentId].classList.add("is-visible");
				}

				TweenMax.to(this.getBgImgs()[currentId], 0.6, {
					autoAlpha: 1,
					scale: 1
				});
			});
		}
	}

	listOpacityController(id) {
		id = parseInt(id);
		let aboveCurrent = this.listItems - id;
		let belowCurrent = parseInt(id);

		if (aboveCurrent > 0) {
			for (let i = 1; i <= aboveCurrent; i++) {
				let opacity = 0.5 / i;
				let offset = 5 * i;
				TweenMax.to(this.getListItems()[id + i], 0.5, {
					autoAlpha: opacity,
					x: offset,
					ease: Power3.easeOut
				});
			}
		}

		if (belowCurrent > 0) {
			for (let i = 0; i <= belowCurrent; i++) {
				let opacity = 0.5 / i;
				let offset = 5 * i;
				TweenMax.to(this.getListItems()[id - i], 0.5, {
					autoAlpha: opacity,
					x: offset,
					ease: Power3.easeOut
				});
			}
		}
	}
}

new VerticalMouseDrivenCarousel();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js