Иван Татауш

у элемента с position: fixed; обязательно должна быть указана ширина. Или укажи

position: fixed;
left: 0;
right: 0;

как вариант можно так попробовать
https://jsfiddle.net/s7z50fjc/2/

https://codepen.io/AllThingsSmitty/pen/cHjIC/

У тебя блочные элементы и они располагаются друг под другом. Можно так решить (добавить display: inline-block)
codepen.io/anon/pen/ZexBPp

Если я правильно понял, блок который должен появиться изначально с display: none или visibility: hidden.
Добавь для блока который должен появляться :hover { display: block } или как ты там его прячешь.

Оберни изображение в родителя и задай ему overflow hidden. Уменьшай размер родителя, а не изображения.

Можно добавить родителя. Пример

Проще всего вырезать картинки PhotoShop СС, кликай на слой правой кнопкой и "Быстрый экспорт в PNG". Но лучше делать Экспорт для Web и сохранять jpg (оптимизация размера).
Вырежи картинки так как тебе удобно и добавь css filter www.w3schools.com/cssref/css3_pr_filter.asp
Делай это тегом img так правильнее будет, при наведении на блок убирай фильтр