Code Playground

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	transition: 0.75s ease;
}
body {
	min-height: 100vh;
	display: grid;
	place-items: center;
	gap: 4rem;
	background: #b8860b;
}
#grid {
	width: calc(100% - 20vmin);
	aspect-ratio: 16 / 7;
	background: linen;
	display: grid;
	grid-template-columns: 1fr 0fr 1fr;
	place-items: center;
	outline: 2px solid #804a00;
	border-radius: 5vmin;
	box-shadow: 0 1rem 2rem -1rem rgba(68 50 4 / 1);
	overflow: hidden;
}
.left,
.right,
.middle {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	transform-origin: center;
}
.left {
	background-image: url("https://assets.codepen.io/4787486/hamster-3.jpg");
	border-right: 1px solid #804a00;
}
.middle {
	font-size: 0rem;
	background-image: url("https://assets.codepen.io/4787486/hamster-4.jpg");
}
.right {
	background-image: url("https://assets.codepen.io/4787486/hamster-2.jpg");
	border-left: 1px solid #804a00;
}

#grid:hover {
	grid-template-columns: 0fr 1fr 0fr;
}

Frontend Forever App