Максим Тюльпаков

Открываете стили, затем галку - "расширенные стили", там включаете эффект наведения мыши, дальше можно поиграться со стилями и сделать такой эффект. Соответственно нужно понимать, что картинка должна быть не фоновая, а вставленная отдельным объектом.

Можно задать картинку тегу <a> в CSS в качестве background, тогда будет норм.

А есть ссылка на сайт? Мне кажется такую проблему лучше решать используя "отладчик" браузера. Там все более наглядно отловить можно.
Например в хроме это ctrl+shift+i

javascript.ru/ui/tree

Конкретно div - никак, не режется он!

emmet нужно осваивать. Без разницы в каком редакторе. Хотя, думаю вы его уже и так знаете... Но мало ли.

Добавить: Beautify atom, на переносах тоже время убивается, а здесь раз кликнул и все тебе ровненько..

Подключаешься через WinSCP , затем просто открываешь из файл-менеджера WinSCP документ в любом редакторе какой нравится. Сохранение результата отправляется на хостинг.
Пробовал через notepad++, в нем встроенный плагин ФТП. Чуть время проходит и сохранения не передаются на хостинг. В связке с WinSCP таких траблов нет, работает на ура!

Код
Не пойму никак, почему блок "поиск на сайте" не реагирует на css пробовал разные варианты и изменения свойств...

Добавим инфографики: