1

I have a little problem I can't seem to solve. I have an image that I scale with an input range. I go from 100% width to 150% width.

The problem is that I have on this image divs in absolute position that have to change position when I scale the image.

How do I do that?

Here's a sandBox to illustrate my problem

https://codesandbox.io/s/brave-bogdan-0149c?file=/src/components/Carte/Carte.js

Beda
  • 107
  • 1
  • 11
  • I'd suggest changing title to something like "pin elements onto an image with dynamic resizing", or at least less specific for your case. – Tymek May 20 '20 at 19:06

1 Answers1

1

notice that dot is a child element of a container of img, not of the picture itself. Move width, add position: relative on container. Example: https://codesandbox.io/s/blissful-faraday-qyhmx?file=/src/components/Carte/Carte.js

Also, it's helpful to simplify the problem you're faced with. One dot, no tooltips etc, remove code duplication. Divide and conquer. You'll have much more pleasant time

Tymek
  • 3,000
  • 1
  • 25
  • 46