Gallery

by kthornbloom

HTML

<div class="wrap">
	<div class="item" style="background:url(http://loremflickr.com/320/240/dog)">
	</div>
	<a href="#" class="item" style="background:url(http://loremflickr.com/320/240/cat)">
	</a>
	<a href="#" class="item" style="background:url(http://loremflickr.com/320/240/paris)">
	</a>
	<a href="#" class="item" style="background:url(http://loremflickr.com/320/240/sunset)">
	</a>
	<a href="#" class="item" style="background:url(http://loremflickr.com/320/240/dog)">
	</a>
	<a href="#" class="item" style="background:url(http://loremflickr.com/320/240/cat)">
	</a>
	<a href="#" class="item" style="background:url(http://loremflickr.com/320/240/paris)">
	</a>
	<a href="#" class="item" style="background:url(http://loremflickr.com/320/240/sunset)">
	</a>
</div>

CSS

.wrap {
	display:flex;
	flex-wrap:wrap;
	flex-align:center;
}
.item {
	height:25vw;
	width:25%;
	background-size:cover!important;
	transition:.25s;
}

JavaScript

$('.item').on('click',function(event){
event.preventDefault();
	$('.item').not($(this)).css({
		width: '',
		height: ''
	}).attr('id','');
	$(this).css({
		width: '100%',
		height: '100vh'
	}).attr('id','selected');
  setTimeout(function(){
  	$('html, body').animate({
        scrollTop: $("#selected").offset().top
    }, 200);
  }, 250)
	
});