Dima Polos

Не работает и работает не будет! Надо понимать, что такое переход из состояния в состояние, а что такое дискретность. Дело в том, что есть состояния, которые плавно перетекают, а есть только такое или такое. Например, ребенок растет плавно, вот ребенку один год, вот прошло два месяца и уже год и 2 месяца, как ни странно, а вот ему уже 43, а есть (сейчас не будем про хирургию) дискретное состояние ребенка или человека, это девочка или мальчик, человек либо родился такого пола, либо другого, нет переходного состояния, как в случае с возрастом. Зачем это понимать и знать? Потому что transition отработает только для свойств, которые переходные, но не дискретные. Например, есть ширина 0 пкс, добавим 1 пкс и ширина уже 1пкс, добавим еще 20 - 20пкс, такое свойство можно анимировать. Есть прозрачность 0, а есть 0.1, а есть 0.2, 0.5, 1 - тоже можно. Но, есть display: block, а есть display: none, это дискретные состояния, либо есть, либо нет, анимации не будет, зато можно блок показать/скрыть с помощью анимации на его ширину, высоту, прозрачность... Цвет, как ни странно это тоже величина, которая имеет переходные состояния, например в препроцессорах можно написать #ccc + #eee и получить новый цвет, так как цвета задаются, по сути, просто числом, и увеличивая/уменьшая число получаем анимацию. А какой переход между двумя картинками? Никакого, только такая картинка или такая, поэтому, чтобы сделать плавную анимацию надо пробовать, разве что, прозрачность блока с фоновым изображением.

<input type="radio" checked name="dva" id="dva1"/>
<label for="dva1"><img src="/upload/s1p1.png" class="notChecked"><img src="/upload/s1p2.png" class="ifChecked"></label>
<style>

input:checked + label img.ifChecked{
  display: block;
}

input:checked + label img.notChecked{
  display: none;
}

input + label img.ifChecked{
  display: none;
}

input + label img.notChecked{
  display: block;
}


</style>

https://jsfiddle.net/z8b5cune/

svg надо вставить кодом прямо html. Когда рисуешь svg в редакторе графики, то в панели слои можно подписать отдельный слой, и подпись попадает в атрибут id, а если объекты сгруппировать, то всем этим слоям внутри группы будет присвоен атрибут class. Зачем это? Теперь, зная id или class слоя можно просто задать ему css стили. Чтобы поменять цвет используйте свойство fill: #... как обычно в css.
Например, иконка нарисована кривой линией, id у нее line, то можно сделать так:
#line:hover{
fill:#777;
}

display: inline-block;
vertical-align: top; //bottom, baseline, middle.

В моем случае проблема оказалась в самом браузере, помогла чистка кеша, куков и так далее.
Вот тут подробнее: Как узнать, кто занимает localhost:3000?

Всем спасибо, за подсказки! Нет ни одного процесса связанного с локалхост:3000. НО! Я разобрался, тут все запутаннее оказалось. Расскажу, может кому поможет.
Проблема оказалась в браузере. Помогла полная очистка куков, истории и данных от приложений.
Я скачал с гитхаба исходники PWA - progressive web app, скачал, чтобы изучить эту технологию. PWA основывается на объекте web worker (js), который как бы "живет" в браузере, как отдельный процесс и позволяет веб приложению работать на базе веб технологий, но при этом выглядеть как нативное. Так как это было приложение-пример, то разработчики сделали web worker, который перехватывает запросы на локалхост:3000 и обрабатывает его сам. Если бы это было реальное приложение, оно бы перехватывало запросы на адреса своих серверов, а другие адреса не трогало, а тут приложение было настроенно на локалхост. Так как это приложение я установил с помощью хрома, который по умолчанию, то проблема была только в хроме, я попробовал перед очисткой истории зайти через ИЕ на локалхост и не получил ответа, тогда как хром по прежнему показывал мне то самое приложение. Очистив куки, кеш и данные приложений все вернулось на места.