How to group two images together

Question

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;
}