Можно ли сделать такую ховер-анимацию на чистом CSS, совместимую с IE11 и flexbox?

oink, Тут все зависит от того какая высота должна быть у container, если можно сделать фиксированную высоту, то все что внутри можно сделать абсолютным позиционирование и тогда вообще ничего не будет двигаться из-за этих этих изображений. Я добавил приме в ответ, как решите свою задача, можете поставить галочку, если помог.

Как сделать вертикальную шкалу с этапами (развития, строительства или другого) на HTML?

Adamos,

встречный вопрос: а у вас есть знакомые со зрением +8?
У которых настройка шрифтов в браузере почему-то разрывает всякие крутые дизайны в клочья?

Я вообще не понимаю о чем вы говорите и где тут крутой дизайн. Притенения к размеру шрифта это дичь какая-то. Вы что не можете адаптировать блок и текст как надо без знакомых? Это настолько элементарная задача с кучей вариантов решения, что просто смешно слушать о каких-то проблемах. Лично я без проблем сделаю этот блок полностью отзывчивым ко всем экранам и размерам и динамическому тексту, но в двух словах я этого не напишу и делать за кого-то не буду, а поскольку такой вопрос задали я предложил простое решение. А то что вы шрифт не можете подогнать и вам иконка мешает, ну это ваши проблемы.

Можно ли сделать такую ховер-анимацию на чистом CSS, совместимую с IE11 и flexbox?

oink,
Что-то вроде этого можно придумать, при чем можно в контейнере все элементы сделать абсолютным позиционировать и двигать как угодно

Как сделать вертикальную шкалу с этапами (развития, строительства или другого) на HTML?

Adamos, Вы вообще про адаптацию слышали или что вас смущает в иконках, шрифтах и прочих мелочах с которыми верстальщик работает постоянно?

Как сделать вертикальную шкалу с этапами (развития, строительства или другого) на HTML?

Adamos, с чего вдруг, вам глаза и тесты для чего?

Можно ли сделать такую ховер-анимацию на чистом CSS, совместимую с IE11 и flexbox?

oink, сделать два блока внутри обертки с position relative и внутри менять их местами или что там вам нужно делать. Конкретизируйте ситуацию, не совсем понятно, но вариантов достаточно.

Как сделать вертикальную шкалу с этапами (развития, строительства или другого) на HTML?

Adamos,

Потому что в HTML придется много думать. например, о том, как это будет выглядеть у пользователя на мобиле с текстами дикого размера, напрочь не влезающими в отведенное им дизайнером место.

а что там думать то? Деградация стилей. Убираем лишний декор и выстраиваем в ряд, направление иконок слева или с права, без проблем контролируется флексами. Все предельно просто.

Как сделать вертикальную шкалу с этапами (развития, строительства или другого) на HTML?

На флексах вообще без проблем. Верстаете блоки фиксированного размера. Текст внутри блоков просто центрируете все так же флексами без отступов сверху и снизу, так будет свободное пространство сверху и снизу для текстов разной длины. Ну и картинку по центру. Просто соблюдать симетрию относительно картинки. Для декстопа этого будет достаточно. При переходе на планшет, там эта картинку по сути и не нужна уже (чисто декор и никакой информации не несет.) и там вообще руки полностью развязаны делать как понравится..

Можно ли сделать такую ховер-анимацию на чистом CSS, совместимую с IE11 и flexbox?

А почему не сделать что-то вроде этого?

Как создать такой вид при такой HTML структуре?

Вот тоже самое, но с высотой в процентах:

Как создать такой вид при такой HTML структуре?

DeniSidorenko, Про высоту все верно, для примера сделал адаптивно на размер окна. В каком-то смысле может и лучшее, просто гриды для таких целей больше подходят, но я пока стараюсь их не использовать в связи с меньшей поддержкой чем у флексов.

Почему в адаптивной верстке все слетает?

chill boy, Пожалуйста. Добавил ответ.

Почему в адаптивной верстке все слетает?

Может у вас стили через js формируются во время загрузки и нужно эти скрипты повесить так же на ресайз...

Как сбросить кэш?

Anonymous Anonymous, Я не особо знаком с angular. Этот способ работает для любого подключаемого файла в html разметке. Это может быть js:
<script src="js/script.js?ver=0.0.56"></script>
или картинка:
<img src="images/ico.png?ver=0.0.56">
и любой другой файл

Как так расположить блоки с помощью flex?

mrlag,

Но что проще?) И главное, работоспособней:)

Гриды

Человек в свой проект возьмёт данный вариант, а потом аукнется:)

У человека есть задача, я предоставил решение. Более того я без проблем могу представить пару вариантов где такой подход будет более чем самодостаточен. Кроме того это не просто решение, а возможность понять на практике, что возможно сделать и как. Вы вот своим ограниченным знанием flex не смогли догадаться, что можно применить column, так что пусть остальные тоже живут в неведении?

Это как вчера в теме спрашивали, как сделать чтобы элементы обтекали блок и переносились на новую строку. Люди уже о float забыли, а вы упрекаете пример раскрывающий потенциал флексов.

Как так расположить блоки с помощью flex?

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

Как так расположить блоки с помощью flex?

qqignatqq, Да, тут нюанс в том что justify-content: space-between; будет работать в другом направлении, поэтому margin auto

Как так расположить блоки с помощью flex?

qqignatqq, Я как-то не планировал делать, просто хотел навести на мысль)

Как так расположить блоки с помощью flex?

qqignatqq, Вы не поверите, но и это не проблема:

Как так расположить блоки с помощью flex?

mrlag, Вам бы тоже не помешало флексы подучить: