dglushkov,
возможно вы хотели так ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>.grid{
width:90%;
margin:7.5%;
box-sizing:border-box;
position:relative;
}
.grid-item{
width:18%;
margin-right:2px;
margin-bottom:8px;
position:absolute;
}
.w2{
width:36%;
}
.stamp{
position:absolute;
width:36%;
left:19.5%;
top:0;
}
.standard{
width:9%;
height:0;
visibility:hidden;
border:none;
}
.grid-item img{
width:100%;
height:auto;
}
.grid-item img:hover{
-webkit-filter:brightness(75%);
}
.grid-item a:visited img{
-webkit-filter:sepia(100%);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.2.2/masonry.pkgd.js"></script>
<script src="https://imagesloaded.desandro.com/imagesloaded.pkgd.js"></script>
<script>
$(function() {
$(".grid").imagesLoaded(function() {
$(".grid").masonry({
itemSelector: ".grid-item",
transitionDuration: "1.2s",
horizontalOrder: true,
columnWidth: ".grid .standard"
});
$(".grid").masonry("layout")
});
$(".grid-item").click(function(event) {
event.preventDefault();
$this = $(this);
$(".grid").masonry("unstamp", $(".stamp").removeClass("stamp"));
$this.addClass("stamp").removeAttr("style");
$(".grid").masonry("stamp", $this);
$(".grid").masonry("once", "layoutComplete", function() {
var destination = $this.offset().top -
100;
$("body, html").stop().animate({
scrollTop: destination
}, 750)
});
$(".grid").masonry("layout")
})
});
</script>
</head>
<body>
<div class="grid">
<div class="grid-item">
<a href="#">
<img src="http://via.placeholder.com/350x150/"/>
</a>
<div class="standard"></div>
</div>
<div class="grid-item">
<a href="#">
<img src="https://cdn.lifehacker.ru/wp-content/uploads/2010/02/4980CD4D-23DB-4551-A637-E0C8EFABA2AA.jpg"/>
</a>
<div class="standard"></div>
</div>
<div class="grid-item">
<a href="#">
<img src="http://dummyimage.com/480x320/"/>
</a>
<div class="standard"></div>
</div>
<div class="grid-item">
<a href="#">
<img src="http://dummyimage.com/240x480/"/>
</a>
<div class="standard"></div>
</div>
<div class="grid-item">
<a href="#">
<img src="http://dummyimage.com/320x480/"/>
</a>
<div class="standard"></div>
</div>
<div class="grid-item">
<a href="#">
<img src="http://dummyimage.com/640x480/"/>
</a>
<div class="standard"></div>
</div>
<div class="grid-item">
<a href="#">
<img src="http://dummyimage.com/320x640/"/>
</a>
<div class="standard"></div>
</div>
</div>
</body>
</html>