How to place buttons on every leafs in given image with responsive?

intensity_old
i need to place buttons on each leafs. exactly replace those numbers. please help me.

How are you doing it now? Show us what you have attempted so far.

2 Likes

As Steve said above we usually like to see what you have tried first and then we can tell you where you went wrong. :slight_smile:

One of the ways I would go about this is to absolutely place the numbers (you mentioned buttons?) using percentages . The parent container for the image should be position:relative and sized responsively or shrink to fit a responsive image. Then you can place the numbers absolutely over the top of the image and then you use transform:rotate(xxdeg) to rotate them.

You would need to use media queries to change the size of the text if you are having the image go really big or small or try viewport sized typograpghy.

As already mentioned it would be good if you had a go at this yourself and then we can see what level you are at and help you along the way. It would also be good for you to provide the acual images you are using for this display so we can see what we are dealing with :slight_smile:

1 Like

Frankly, I made the response I did because I knew it would be horrendously complicated to do this. Based on what Paul wrote, it is. Don’t do this.

1 Like

I have completed this.

<div class="container">
        <img src="../../assets/images/intensity.png" alt="intensity">
        <button class="ten">20</button>
        <button class="thirty" >30</button>
        <button class="fourty" >40</button>
        <button class="fifty" >50</button>
        <button class="sixty">60</button>
        <button class="seventy" >70</button>
        <button class="eighty" >80</button>
        <button class="ninety" >90</button>
        <button class="hundread" >100</button>
    </div>

.container img{
        max-width: 100%;
    }
    .container {
        position: relative;
    }
    .container button {
        position: absolute;
        background: no-repeat;
        border: none;
        color: #cec7c7;
        font-size: 2em;
    }
    .ten{
        top: 16%;
        left: 7%;
        transform: rotate(35deg);
    }
    .twenty {
        top: 28%;
        left: 24%;
        transform: rotate(59deg);
    }
    .thirty {
        top: 43%;
        left: 33%;
        transform: rotate(84deg);
    }
    .fourty {
        top: 59%;
        left: 33%;
        transform: rotate(104deg);
    }
    .fifty {
        top: 74%;
        left: 23%;
        transform: rotate(127deg);
    
    }
    .sixty {
        top: 85%;
        left: 6%;
        transform: rotate(145deg);
    }
    .seventy {
        top: 86%;
        left: 71%;
        transform: rotate(-118deg);
    }
    .eighty {
        top: 67%;
        left: 63%;
        transform: rotate(-93deg);
    }
    .ninety {
        top: 47%;
        left: 66%;
        transform: rotate(-77deg);
    }
    .hundread {
        top: 30%;
        left: 80%;
        transform: rotate(-47deg);
    }
    @media (min-width: 768px) and (max-width: 1024px) {
        .container button {
            font-size: 4em;
        }
        
        
      }