Роман

в вашем коде во-первых, не хватает одной кавычки после имг. Во-вторых, ваш код гласит: "При наведении на элемент с классом контент с каждым изображением делаем Х". И зачем вы ховер в ховере вызываете?

Уж лучше бы вы сделали стили для кнопки, которые включаются только при наведении на изоражение, аля: img:hover ~ button { /* стили*/}

Чтоб я ему сказал надо хедер, потом 4 колонки, потом футер

Наймите помощника верстальщика :)

А если без шуток, то используйте ЦССфреймворк типа Бустрап или Зурб Фундейшн

Я думаю проблема в ремах
IE 9 & IE 10 do not support rem units when used in the font shorthand property (the entire declaration is ignored) or when used on pseudo elements.

IE 9, 10 and 11 do not support rem units when used in the "line-height" property when used on :before and :after pseudo elements (https://connect.microsoft.com/IE/feedback/details/...).

Если бы вы программировали на перфокартах, то с таким запросом вы бы сожгли ЭВМ.

Уточте что именно вы хотите сделать.

.imaaage:hover~.text{
color: red;
}

Можно сделать прототипчик на бумаге/в проге/в голове и верстать.

Статейка по поводу
blog.teamtreehouse.com/psd-to-html-is-dead