Edit in JSFiddle

<div class="flex">
  <div class="item img1"></div>
  <div class="item img2"></div>
  <div class="item img3"></div>
  <div class="item img4"></div>
  <div class="item img5"></div>
</div>
body{ font-family:arial; }
html, body { max-width:1200px; }

.flex {
	display: flex;

	overflow:hidden; /*скроем тень*/
}
.item {
	height:300px;

	flex:20%; /* = flex-basis:20%; */

	transition: flex 300ms ease;

	box-shadow: 0 0 19px 3px #000; margin: 1px; /* красивости тени */
}
.item:hover {
 	flex: 0.1 0.1 400px;
	background-size: 100% 100%;
}


.img1 { background: url('https://picsum.photos/400/300?image=529') 0 0 no-repeat; }
.img2 { background: url('https://picsum.photos/400/300?image=533') 0 0 no-repeat; }
.img3 { background: url('https://picsum.photos/400/300?image=534') 0 0 no-repeat; }
.img4 { background: url('https://picsum.photos/400/300?image=532') 0 0 no-repeat; }
.img5 { background: url('https://picsum.photos/400/300?image=631') 0 0 no-repeat; }