<div id="wrap">
	<div class="centerer">
	
		<div id="blocks">
			<div class="block block--link">
				<div class="block__pad">
					<div class="block__content"></div>
				</div>
			</div>
			<div class="block block--hidden">
				<div class="block__pad">
					<div class="block__content"></div>
				</div>
			</div>
			<div class="block block--hidden">
				<div class="block__pad">
					<div class="block__content"></div>
				</div>
			</div>
			<div class="block block--link">
				<div class="block__pad">
					<div class="block__content"></div>
				</div>
			</div>
			<div class="block block--hidden">
				<div class="block__pad">
					<div class="block__content"></div>
				</div>
			</div>
			<div class="block block--link">
				<div class="block__pad">
					<div class="block__content"></div>
				</div>
			</div>
			<div class="block block--hidden">
				<div class="block__pad">
					<div class="block__content"></div>
				</div>
			</div>
			<div class="block block--hidden">
				<div class="block__pad">
					<div class="block__content"></div>
				</div>
			</div>
			<div class="block block--link">
				<div class="block__pad">
					<div class="block__content"></div>
				</div>
			</div>
			<div class="block block--hidden">
				<div class="block__pad">
					<div class="block__content"></div>
				</div>
			</div>
			<div class="block block--hidden">
				<div class="block__pad">
					<div class="block__content"></div>
				</div>
			</div>
			<div class="block block--hidden">
				<div class="block__pad">
					<div class="block__content"></div>
				</div>
			</div>
			<div class="block block--link">
				<div class="block__pad">
					<div class="block__content"></div>
				</div>
			</div>
			<div class="block block--hidden">
				<div class="block__pad">
					<div class="block__content"></div>
				</div>
			</div>
		</div>
		
	</div>
</div>
// autoprefixer: true

html,
body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: #555;
	background: #fff;
}

* {
	box-sizing: border-box;
}

#wrap {
	position: relative;
}

.centerer {
	width: 100%;
	padding: 20px;
	max-width: 1200px;
	margin: auto;
}

#blocks {
	width: 400px;
	margin: auto;
}

.block {
	width: 200px;
	height: 200px;
	overflow: hidden;

	&__pad {
		width: 200px;
		height: 200px;
		padding: 10px;
	}

	&__content {
		width: 100%;
		height: 100%;
		background: #eee;
	}

	&--link {
		cursor: pointer;
		transition: box-shadow .2s ease;

		&:hover {
			box-shadow: 0 0 0 2px #b5d5fa;
		}
	}

	&--hidden {
		display: none;

		.block {
			&__content {
				background: #c7efe7;
				transition: .4s ease;
				transition-property: transform, opacity;
				transform: scale(.5);
				opacity: 0;
			}
		}

		&--show {
			display: block;

			.block {
				&__content {
					transform: scale(1);
					opacity: 1;
				}
			}
		}
	}
}
View Compiled
$(function () {

	$('.block--link').click(function () {
		var nextHidden = $(this).nextUntil('.block--link');

		nextHidden.toggleClass('block--hidden--show');
		$('#blocks').masonry('layout');
	});

	$('#blocks').masonry({
		itemSelector: '.block'
	});

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js