My main goal is to seamlessly fit the images together, but I'm struggling to achieve this. I tried using masonry, but unfortunately it didn't work for me. All I want is to tightly pack the divs together. For instance, in my fiddle example, I would like the bottom left and right cat images to move up.
Additionally, I am interested in adding an animation effect when the user first views the images on page load, similar to this example:
Do you have any suggestions on how to accomplish either of these tasks?
Fiddle: https://jsfiddle.net/jzhang172/0jL2dyg1/
.grid{
display:flex;
flex-direction:row;
justify-content:center;
max-width:500px;
flex-wrap:wrap;
}
.grid-item{
height:150px;
width:150px;
overflow:hidden;
}
.grid-item img{
height:100%;
}
.item-2{
height:300px;
}<div class="grid">
<div class="grid-item"><img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"></div>
<div class="grid-item item-2"><img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg"></div>
<div class="grid-item"><img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></div>
<div class="grid-item"><img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></div>
<div class="grid-item"><img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></div>
<div class="grid-item"><img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></div>
</div>