Сергей Лещенко

Думаю вам этот пример поможет https://paulrhayes.com/experiments/sphere/

https://jsfiddle.net/682qg1dL/13/ флексами
нелогично создавать span, а потом писать ему display: block

https://codepen.io/fancyapps/full/OvZxGB вроде то что вы спрашивали
Сделано этим плагином fancyapps.com/fancybox/3

prntscr.com/k1kjce посмотрите псевдоелемент before, похожие стили. Попробуйте отключит скрипты.

Если картинка в ссылке всегда будет первая, можно popover вызывать слева.

https://codepen.io/zelenka/pen/wjqPJV?editors=1100 работает если указана высота дочерних блоков

Это будет одна форма, поэтому ваш скрип можно приспособить к форме. Шаги можно сделать например с помощью этого www.jquery-steps.com/Examples

Или картинкой или градиентом

Вырежьте часть изображения joxi.ru/L215KweI66pje2 и используйте background-repeat: repeat-x;

Если я правильно понял ваш вопрос, и у вас есть картинка то используйте <map>

Можно с помощью ::before, ::after

По быстрому как то так https://jsbin.com/pokunufiho/edit?html,css,output

Но иконка будет тоже прозрачной. Чтобы это устранить нужно сделать картинку нужной прозрачности и фоном добавить к блоку. По умолчанию скрывающейся блок display: none, а чтобы появился пишем это .img-block:hover .hover-block{
display: block;
}
Ну и добавить время,чтобы это было плавно.

Если ничего не получается, всегда есть position: absolute;

Наша группа- блочный элемент, при наведении мыши цвет изменяется. Как выровнять эту картинку?