<div class="container">
	<section id="section-1">
		<div class="overlay">
			<div class="inner">
				<h1>Overlay</h1>
			</div>
		</div>
		<img src="https://unsplash.it/300?image=1002" alt="" />
		<div class="text">
			<h1>Text</h1>
		</div>
	</section>
	<section id="section-2">
		<div class="overlay">
			<div class="inner">
				<h1>Overlay</h1>
			</div>
		</div>
		<img src="https://unsplash.it/300?image=1021" alt="" />
		<div class="text">
			<h1>Text</h1>
		</div>
	</section>
	<section id="section-3">
		<div class="overlay">
			<div class="inner">
				<h1>Overlay</h1>
			</div>
		</div>
		<img src="https://unsplash.it/300?image=1023" alt="" />
		<div class="text">
			<h1>Text</h1>
		</div>
	</section>
</div>

/* Made in collaboration with Lucy Commisso */

$animateIntensity: 12.5%;

body {
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
}

h1 {
	margin: 0;
	font-size: 24px;
}

.container {
	width: 1000px;
	height: 95vh;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

section {
	position: relative;
	overflow: hidden;
	font-size: 0;
	cursor: pointer;
}

.text {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.overlay {
	@extend .text;
	background-color: rgba(#a458c7, 1);
	z-index: 1;
	opacity: 0.8;
	border-radius: 50%;
	// border-top-right-radius: 50%;
	transform: translate3d(-62%, 62%, 0);
	// transition: transform 1.2s ease, border-top-right-radius 0.3s ease 1.2s, width 1.2s ease, height 1.2s ease;
	transition: all .6s ease-out;
	width: 200%;
	height: 200%;
	left: -50%;
}

section:hover .overlay {
	opacity: 1;
	// border-radius: 0;
	border-radius: 40%;
	// transform: translate3d(0, 0, 0);
	transform: translate3d(-$animateIntensity, $animateIntensity, 0);
	// width: 100%;
	// height: 100%;
}

.inner { // Position this in a corner
	position: absolute;
    width: 50%;
    height: 50%;
    top: $animateIntensity;
    right: $animateIntensity;
	display: flex;
	justify-content: center;
	align-items: center;
}

#section-1 .overlay {
	background-color: #233758;
}

#section-2 .overlay {
	background-color: #444;
}

#section-3 .overlay {
	background-color: #2e4d3d;
}