Можно ли организовать увеличение элемента плитки в строго заданном месте, в документации есть описание stamp, я пробую, но увеличение происходит в разных местах
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.grid {
width: 90%;
margin: 7.5%;
box-sizing: border-box;
}
.grid-item {
width: 18%;
margin-right: 2px;
margin-bottom: 8px;
}
.w2 {
width: 36%;
}
.stamp {
position: absolute;
width: 36%;
left: 25%;
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>
$(document).ready(function() {
$('.grid').imagesLoaded( function() {
$('.grid').masonry({itemSelector: '.grid-item', transitionDuration: '1.2s', horizontalOrder: true, columnWidth: ".grid .standard", stamp: '.stamp'});
});
$('.grid').masonry("layout");
$('.grid-item').click(function(event){
event.preventDefault();
$(this).siblings().removeClass('stamp');
$(this).addClass('stamp');
$this = $(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>