image_gallery_lightbox.css

.c-anim-block {
	overflow: hidden; /* make sure images don't go outside of our container */
	border-radius: 25px;
	display: flex;
	justify-content: space-between;
}
		
.c-anim_block__img-wrap {
	flex: 0 0 20%; /* initial width of each image */
	max-width: 20%;
	overflow: hidden;
	height: 500px;
	transition: all 1s ease; /* transitions on hover out */
}
		
.c-anim-block__img { /* a trick to make sure image gets centered within the container and chopped on the sides */
	width: 100%;
	object-fit: cover;
	height: 500px;
}
		
.c-anim_block__img-wrap.is-active { /* custom .js added CSS class, which happens on hover */
	flex: 0 0 80%; /* increase the width of our image container */
	max-width: 80%;
	overflow: hidden;
	transition: all 1s ease;
	height: 500px;
}
		
.c-anim_block__img-wrap.is-inactive { /* custom .js added CSS class, on all elements that aren't currently hovered on */
	flex: 0 0 5%;
	max-width: 5%;
	transition: all 1s ease;
	height: 500px;
}