Rsa97

Потому что вы написали "элемент с классом .smile, являющийся потомком элемента image с псевдослассом hover".
А надо написать "элемент с классом .smile, следующий за элементом image с псевдослассом hover".

Зафиксировать не top, а bottom.

background-size: contain;
или
background-size: cover;

.radio-wrapper input[type="radio"]:checked + label.radio-wrapper

Так не сработает, у вас input расположен внутри label, а селектор соответствует label, идущей сразу после input.
Меняйте расположение элементов и, соответственно, селекторы.

Например, так:

Проблема в вашем коде.

content содержит строку, которая вставляется в документ именно как строка, а не как HTML-код. Экранировать надо только кавычки и обратный слэш.
https://www.w3.org/TR/CSS21/syndata.html#strings