locked
How to group two images together RRS feed

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

    Sunday, June 7, 2020 6:47 PM

Answers

  • User1686398519 posted

    Hi,  LetMeCode

    According to your needs, I made an example, please refer to it.

    <style>
        .partners-images-cut-out-frame {
            ;
            width: 60px;
            height: 60px;
        }
        .partners-images-1 {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            -webkit-mask: radial-gradient(circle at calc(100px) calc(100px),transparent 20px, yellow 5px);
        }
        .frame-image-partner-1 {
            ;
            width: 25px;
            height: 25px;
            right: -9%;
            bottom: -9%;
            -webkit-border-radius: 24px;
            border-radius: 24px;
        }
        .partner1-logo-music {
            width: 15px;
            height: 15px;
            border-radius: 50%;
        }
    </style>
    <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>

    Here is the result.

     
    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 8, 2020 9:56 AM