Как привязать текст к отметкам на адаптивной картинке?

Question

[Антон Вебсайтовский]

Здравствуйте.
Есть картинка, она адаптивная, пошаговая так сказать инструкция.
Есть 4 точки, они привязаны к отметкам на картинкам, привязаны текста через css стили.

При сжатии экрана, ну или браузера, картинка сжимается и уменьшается, можно ли чтобы текста следовали за точками.
Реально ли такое сделать и если да то как?

Щас работает так, картинка сжимается, а текста остаются на месте и не следуют за точками.

Рабочий пример:
https://jsfiddle.net/cqwyd9zL/

Comments

[Ankhena]

Как отловить размер изображения и позиционировать на нем объекты?

[Alfieros]

Или через псевоэлемент в content: '', записать текст

[Антон Вебсайтовский]

Alfieros, это как, есть пример?

[Alfieros]

.pt1:before{
content: 'Какой-то текст';
font-size: 14px;

Если текста не много, то это самый быстрый вариант.