chelkaz

Не используйте русские буквы в именах файлов!
Попробуйте указать размеры лого

<img style="width: 80px; height: 100%;" src="images/logo.png">

Теги у вас все закрыты.

Пока страница грузится Юзеру, скачивайте видео на сервер, там его переделывайте с помощью например FFMpeg что бы увеличить уровень громкости и потом отдавайте юзеру) Это шутка. Но как вариант рабочий.

Это легко делается на CSS
Смысл такой.
Делаете основной блок, а в нем уже img и нижний блок.
А что бы влиять на стили внутренних дочерних блоков при наведении на основной (родителя) нужно делать так:

.parent:hover .img {
/* тут новый класс для фото */
}
.parent:hover .niz-block {
/* тут новый класс для нижнего блока */
}

Все это не хорошо, сортировка так же полезна для поисковика. Лучше делать через GET. Но если хотите через POST то не нужно js. Делайте через form. Оберните формой селект, сделайте селекту имя например sort и опшинам в селекте например asc и desc. После приема запроса ловите $_POST['sort'] и сортируйте. А уже форму запускайте в js по событию выбора селекта.

Так Вы сами родителю 100% ширины указали, соответственно родитель принимает ширину своего уже родителя.
Вы напишите толком что именно нужно и какой результат. И лучше не картинку, а ссылку.

Вам уже ответили правильно. Не слушайте про js и jquery. Они тут не нужны для вас. Делается просто на CSS. Еще 4 года назад верстал шаблон для Битрикс и показал что можно делать на простом CSS. Вот посмотрите, все на чистом CSS - https://www.youtube.com/watch?v=0e17lKPatLs

Это называетя - shrinking menu, но не как то что вам выше посоветовали)
То что вам посоветовали это "Липкое" меню.
А вам нужно - shrinking (усадка, сокращение, сжатие, усушка)
Пример: https://codepen.io/j_holtslander/pen/doQggE