<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'
});
});
This Pen doesn't use any external CSS resources.