Put button in same position in boxes with different sizes - html

Question

I am using an image gallery. Each image has different sizes, masonry style. How can I place a button inside each image in the same position with different sizes? I want to put the button in the upper right corner.
css
.EyeG{
cursor: pointer;
position: absolute;
background-color: white;
background-image: url("/assets/eye.svg");
background-position: 13px 13px;
background-repeat: no-repeat;
height: 15%;
width: 15%;
margin-top: -329px;
right: 13px;
border-radius: 8px;
opacity: 1;
}
HTML
<ngx-masonry [options]="masonryOptions" [useImagesLoaded]="true">
<ngxMasonryItem *ngFor="let p of products" class="masonry-item">
</div>
<img [src]="imagMap.get(p.id)">
<figcaption class="EyeG"></figcaption>
</ngxMasonryItem>
</ngx-masonry>

Answer 1

Try this
.masonry-item { position: relative }
.EyeG{
cursor: pointer;
position: absolute;
background-color: white;
background-image: url("/assets/eye.svg");
background-position: 13px 13px;
background-repeat: no-repeat;
height: 15%;
width: 15%;
border-radius: 8px;
opacity: 1;
top:50%;
left:50%;
transfomrm: translate(-50%, -50%);
}

Answer 2

Attached codepen link, please have look.
Let me know if you not got your solution here. Will help you
<div class="header">
<h1>Responsive Masonry.js Grid</h1>
<p>A horizontal image card grid built with masonry.js</p>
</div>
<div class="container">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<a class="item" href="#">
<img src="https://placehold.it/350x300">
<sapn class="EyeG"></span>
</a>
<a class="item" href="#">
<img src="https://placehold.it/350x200">
<sapn class="EyeG"></span>
</a>
<a class="item" href="#">
<img src="https://placehold.it/300x290">
<sapn class="EyeG"></span>
</a>
<a class="item" href="#">
<img src="https://placehold.it/400x300">
<sapn class="EyeG"></span>
</a>
<a class="item" href="#">
<img src="https://placehold.it/350x350">
<sapn class="EyeG"></span>
</a>
<a class="item" href="#">
<img src="https://placehold.it/400x300">
<sapn class="EyeG"></span>
</a>
<a class="item" href="#">
<img src="https://placehold.it/400x500">
<sapn class="EyeG"></span>
</a>
</div>
https://codepen.io/pgurav/pen/zYYXoNj