Как сделать такое с помощью радионопок?

Question

[olya_097]

нужно ли менять разметку?
тут требуют решение именно без js
https://jsfiddle.net/sk13wh6b/

Comments

[Тарас Шульга]

Не сильно понятно чего вы хотите то

[olya_097]

Тарас Шульга, числа - радиокнопки
а блок с описанием и псевдоэлементом показываются по ховеру

Answer 1

[Тарас Шульга]

https://codepen.io/angryyum/pen/RwNprJP Как-то так если правильно понял идею

Comments

[olya_097]

Тарас Шульга, так
спасибо огромное

все бы ок
а это будет гибко?
+ в адаптиве будет вылазить за экран( имеется ввиду тот блок который показывается по ховеру)
https://jsfiddle.net/dj6qta92/1/

[Тарас Шульга]

Ну тут тогда чуток с media поработать и все.

[olya_097]

Тарас Шульга, а с разметкой?
Вообще не трогать?

[Тарас Шульга]

olya_097, ну тут сугубо ваше мнение, если будите что-то менять в html возможно придется менять в css - вообще если есть вопросы пиши в телегу

Answer 2

[strelok011]

Можно радио, текст с рамками в label for, оформление зависит от выделенного radio. Все в css оформляется. Внутри лейблов скрытый див для тултипа, реакция на ховер. Все довольно просто.
Сами радио инпуты сделать прозрачными, позиционировать абсолютно, уменьшить до 1px. Дальше простая верстка. На обертку строки дисплей флекс, на лейблы позишн релатив.

Извиняюсь, с телефона пишу ))