How to design a UI Component like this in React?

Question

I got the requirement for developing a UI component for teams-info like this.

I have just started using React with React-Bootstrap, but I couldn't find a UI layout which can render this. I have used react-responsive-carousel, but It's a flat icon at the bottom of the image as Thumbnail not like a half-circular option shown in the image.

Update: On selecting another image the image positions must not change. Like this. Can anyone guide me how can I achieve this?

Thanks in advance.

Answer 1

Something like this may bring you closer to the result. One way of mapping the user information in the middle would be through utilizing different pieces of content in an array.

function Circle() {
    function elementMethod(){
         return (
              <span onMouseEnter={...} onMouseLeave={...} className='individual--circ'><img src={...}></img> </span>
    }

    return (
<React.Fragment>
   { circleElement.map((element) => {
    <div classname='cir-menu'>
      {element}
    </div>
        }
</React.Fragment>
    )
}

I've built something similar before which has a similar appearance (animated, however). The CSS looked like this:

    .contact-icon{
        background-color: #000000;
        border-radius: 50%;
        padding: 20px;
        box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1),
                    2px 2px 2px 2px rgba(0,0,0,0.1),
                    4px 4px 4px 4px rgba(0,0,0,0.1);
    }

    .middle-cir{
        position: relative;

    }



    .contact-outer{
        background-color: #611427;
        color: white;
        height: 100vh;
        width: 100vw;
        position: fixed;
        display: flex;  
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        margin: 0;
        opacity: 100;
        visibility: visible;
        z-index: 4;
        transition: visibility .5s, opacity 1s ease;
    }

    .contact-outer h1{
        top: 0;
        margin-top: 4em;
        position: absolute;
        opacity: 100
    }


    .contact-outer-none h1{
        top: 0;
        margin-top: 4em;
        position: absolute;
    }

    .contact-outer-none{
        background-color: #611427;
        color: #F2F2E9;
        height: 100vh;
        width: 100vw;
        position: fixed;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        margin: 0;
        opacity: 0;
        visibility:hidden;
        z-index: 4;
        transition: visibility .5s,opacity 1s ease;

    }

    .cir-menu{
        position: relative;
        justify-self: center;   
        display: flex;
        justify-content: center;
        align-items: center;
        transform: rotate(-87deg);

    }

    .cir-a{
        position: absolute; 
        transform: rotate(72deg) translateX(80px) rotate(10deg);
        transition: transform 1s;
    }


    .cir-a:hover{
        position: absolute; 
        transform: rotate(72deg) translateX(110px) rotate(10deg);
        
    }   


    .cir-a-min{
        position: absolute; 
        transform: rotate(72-20deg) translateX(0px) rotate(-72deg);
        transition: transform 1s;
    }

    .cir-b{
        position: absolute;
        transform: rotate(144deg) translateX(80px) rotate(-60deg);
        transition: transform 1s;
    }


    .cir-b:hover{
        position: absolute; 
        transform: rotate(144deg) translateX(110px) rotate(-60deg);
        
    }   

    .cir-b-min{
        position: absolute;
        transform: rotate(144-20deg) translateX(0px) rotate(-144deg);
        transition: transform 1s;
    }

    .cir-c{
        position: absolute;
        transform: rotate(216deg)translateX(80px) rotate(-132deg);
        transition: transform 1s;
    }

    .cir-c:hover{
        position: absolute; 
        transform: rotate(216deg) translateX(110px) rotate(-132deg);
        
    }   

    .cir-c-min{
        position: absolute;
        transform: rotate(216-20deg) translateX(0px) rotate(-216deg);
        transition: transform 1s;
    }

    .cir-d{
        position: absolute;
        transform:rotate(288deg) translateX(80px) rotate(-204deg);
        transition: transform 1s;
    }

    .cir-d:hover{
        position: absolute; 
        transform: rotate(288deg) translateX(110px) rotate(-204deg);
        
    }   

    .cir-d-min{
        position: absolute;
        transform:rotate(288-20deg) translateX(0px) rotate(-288deg);
        transition: transform 1s;
    }

    .cir-e{
        position: absolute;
        transform: rotate(360deg) translateX(80px) rotate(-276deg);
        transition: transform 1s;
    }

    .cir-e:hover{
        position: absolute; 
        transform: rotate(360deg) translateX(110px) rotate(-276deg);
        
    }   

    .cir-e-min{
        position: absolute;
        transform: rotate(360-20deg) translateX(0px) rotate(-360deg);
        transition: transform 1s;
    }

    .nav-icon-ctr{
        visibility: visible !important;
        background-color: #F2F2E9;
        position: relative;
        justify-self: center;
        align-self: center;
        z-index: 99;
        border-radius: 50%;
        color: black;
        height: 20px;
        width: 20px;
        padding: 1rem;
        
        transform: rotate(87deg);
        
        box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2),
                    3px 3px 3px 3px rgba(0,0,0,0.2);
    }