User1242168447 posted
I want to group two images together so that when zooming out it doesn't disassemble. So what I want to achieve is like in the below image.
https://imgur.com/a/VXxhpTR
I tried the below code, it does work well, but when I try to zoom the page, both image get separated, so I want to group them together like in MS Word, when clicking on a images, there's a option named "Group" that assemble two images together.
I used the code in this link but both images get separated when zooming in.
Otherwise, if you do have a good way of achieving it, do suggest.
**HTML**
<div class="partners-images-cut-out-frame">
<img src="~/Content/images/partner1.jpg" class="partners-images-1" />
<div class="frame-image-partner-1">
<img src="~/Content/images/music.svg" class="partner1-logo-music" />
</div>
</div>
**CSS**
.partners-images-1 {
width: 8%;
height: 8%;
border-radius: 50%;
-webkit-mask: radial-gradient(circle at calc(100px) calc(100px),transparent 20px, yellow 5px);
}
.partner1-logo-music {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: green;
fill: yellow;
}