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

Для первого кейса стили будут такие

.fl {float:left}
.fr {float:right}
.no {float:left}

Для остальных в таком же ключе эксперементируйте

Думаю вам этот пример поможет 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 работает если указана высота дочерних блоков

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

Не знаю правильно ли я понял постановку вопроса.
Можно добавить скролл overflow-x: scroll;
или перенос word-wrap: break-word;

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

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

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

Ну это классика. В большинстве встречается 6 стандартных приемов выравнивания. Самый простой, на мой взгляд, это Flex-box и display:table-cell. Также можно с помощью position: absolute и relative. Ну и еще можно использовать плавающий контейнер.

Никак, прозрачность наследуется дочерними элементами. Если нужна прозрачная заливка, то можно сделать небольшую картинку нужной прозрачности и поставить ее на background.

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

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

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

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