transitioned teaser crops

by phloe

HTML

<link rel="stylesheet" href="https://www.dr.dk/global/webfonts.css">
 <ul>
 	<li class="object object--selected">
			<div class="media">
				<img src="https://www.fillmurray.com/1068/600" />
		</div>
		<div class="body">
			<a href="/">A comedian walks into a pub, buys it and turns it into a comedy club</a>
			<p>Comedians have been running comedy clubs for years – none clubbed together to buy a pub, until Barry Ferns and three business partners came along.</p>
			<div class="body__bg"></div>
		</div>
 	</li>
 	<li class="object">
		<div class="media">
			<img src="https://www.fillmurray.com/1084/609" />
		</div>
		<div class="body">
			<a href="/">Bill Murray covers Van Morrison ahead of debut album</a>
			<p>New Worlds will see him collaborate with cellist Jan Vogler on a number of musical pieces and accompanied readings </p>
			<div class="body__bg"></div>
		</div>
 	</li>
 	<li class="object">
		<div class="media">
			<img src="https://www.fillmurray.com/1100/618" />
		</div>
		<div class="body">
			<a href="/">Bill Murray saw the Groundhog Day musical for the first time and loved it so much he cried</a>
			<p>'The idea that... the idea that we just have to try again. We just have to try again. It's such a beautiful, powerful idea'</p>
			<div class="body__bg"></div>
		</div>
 	</li>
 </ul>

SCSS

body {
	font-family: Gibson;
}

ul {
	max-width: 1260px;
	margin: 0 auto;
	display: flex;
	flex-flow: row nowrap;
	padding: 0;
	
	> * {
		list-style: none;
		flex: 1 1 186px;
		position: relative;
		overflow: hidden;
	}
		
	.media {
		width: 100%;
		height: 100%;
	
		img {
			position: absolute;
			top: 0;
			left: 50%;
			width: auto;
			height: 100%;
			transform: translateX(-50%);
		}
	}
		
	.body {
		position: absolute;
		bottom: 0;
		left: 20px;
		width: calc(100% - 40px);
		
		a {
			font-size: 24px;
			line-height: 28px;
			font-weight: bold;
			text-decoration: none;
			margin-bottom: 15px;
			display: inline-block;
			color: #FFF;
			text-shadow: 0 0 2px rgba(0, 0, 0, .5);
			transition: .2s color ease-in-out;
		}
		
		p {
			display: none;
		}
		&__bg {
			position: absolute;
			width: calc(100% + 50px);
			height: calc(100% + 25px);
			top: 100%;
			left: -25px;
			background-color: #FFF;
			_transform: translateY(100%);
			transition: .2s transform ease-in-out;
			z-index: -1;
		}
	}

	.object--selected {
		flex-basis: 1068px;
		flex-shrink: 1;
		flex-grow: 1;

		.body {
			width: calc(100% - 50px);
			transform: translateX(5px);
			a {
				font-size: 42px;
				line-height: 46px;
				color: #000;
				text-shadow: none;
			}
			
			p {
				_display: block;
			}
		
			&__bg {
				transform: translateY(-100%);
			}
		}
		
		.media {
			&:after {
				content: "";
				display: block;
				padding-bottom: 56.25%;
			}
		}
	}
}

JavaScript

var selClass = "object--selected";
var selected = document.querySelector(`.${selClass}`);

function select (element) {
	if (selected) {
		selected.classList.remove(selClass);
	}
	selected = element;
	selected.classList.add(selClass);
}

[...document.querySelectorAll(".object")].map(
(element) => element.addEventListener("click", () => select(element))
);