hover

Только что, VeniVidiVici сказал:

Один из вариантов.

а это?

Подскажите как сверстать... 

Только что, AlexZaw сказал:

добавьте класс к нужным ячейкам и поставьте ему выранивание. можно конечно и без этого обойтись, но придется длинную цепочку условий писать чтобы перебить вашу спецефичность, ну или !important указывать.

Да, и с классами у вас перебор, можно пятью уровнями обойтись, а если использовать thead и tfoot то и тремя

Спасибо. Я только учусь)

Только что, AlexZaw сказал:

.level_2 td:not(:first-child):first-letter{
  color:#fff;font-size: 40px;
}

Не совсем понял какие блоки должны быть с text-align:left

https://jsfiddle.net/sipsap/Lj2qdndw/

Вопрос: 

1. Как сделать что бы значки доллара были такого же размера но при этом не менялся цвет.

2. Текст в первых блоках (с услугами) должны быть align:left; но я не могу поставить спан.

(пример)

Только что, AlexZaw сказал:

.bg:hover  p {
  color: white;
  margin-top: 11px;
}

 

спасибо сработало. А как быть с изображением? 

https://jsfiddle.net/sipsap/w547anoh/

Вопрос:

1. Как сделать так что бы текст менял свой цвет вместе с hover'ом заднего фона, а не нужно было наводить на него отдельно?
2. Не как не могу понять как мне задействовать в активном блоке верхнюю картинку? (мне данны две картинки на одной области. Снизу, бела сверху черная) 

Пример: