CODEWITHSUNDEEP
javascripthtmlcss
Ruslan Abdulloev
Ruslan Abdulloev

Reputation: 25

Binding input to an image

I have an image to which I need to glue an input field. There will be several input fields and each of them should always be in its place, namely on a certain part of the image.

.input-circle {
    border-radius: 50%;
    width: 70px;
    height: 70px;
}
<img class="figure-img img-fluid rounded" src="123.png"/>
<input class="form-control input-circle">

I need to do as shown in gif

perfect result

how can i bind input fields to image like that? Or maybe I need to use a completely different concept?

Thanks in advance for your help!

Upvotes: 1

Views: 335

Answers (1)

Ahmad Habib
Ahmad Habib

Reputation: 2384

Use position relative and absolute to achieve this. A little example:

.body_wrapper {
  position: relative;
  height: 100%;
  width: 100%;
}

.input_wrapper {
  position: absolute;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  overflow: hidden;
  top: 100px;
  left: 100px;
}

.input_wrapper .input-circle{
  height: 100%;
 
}
<div class="body_wrapper">
  <div class="image_wrapper">
    <img src="https://cdn.britannica.com/s:800x450,c:crop/96/177096-138-2CB46AEC/discussion-organ-systems-human-body-another-influence.jpg" alt="">
  </div>
  
  <div class="input_wrapper">
    <input class="form-control input-circle">
  </div>
</div>

Working fiddle

Upvotes: 1

Related Questions