Хазрат Гаджикеримов

Это антипаттерн, использовать :hover для этих целей, используйте JS средства и в нужный момент ставьте класс.

<div class="block">
    <aside class="block__aside"></aside>
    <div class="block__slider"></div>
</div>

<style>
.block {
   display: flex;
   height: 500px;
}

.block__aside {
   width: 320px;
}

.block__slider {
   flex: 1;
}
</style>

Думаю этого достаточно для адекватного человека

Можно использовать fixed, но если только body это размер окна

Попробуй так:

1. Использовать background-image: url(путь) вместо img

либо

2. Сделать блок с relative позиционированием + overflow: hidden, а изображение вот так:

max-width: 40px; /* Максимальная нужная ширина*/
    max-height: 40px; /* Максимальная нужная высота */
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;

Демо animate-scroll - Документация

FlexBOX за 5 минут

.container {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;  
}

По мне лучший слайдер с красивой анимацией это Destaque и Swiper

MODSTORE тут смотрели?

sandbox.juan-i.com/longshadows

Flexbox
Адаптивный и мобильный дизайн с CSS3 Media Queries
Вроде Хабр полон статей на эту тему.

:nth-child(3n)

Вместо числа 3 пишешь какой по счету элемент крайний

Все вроде бы верно, в том то и дело что это вектор и при масштабировании svg он должен как то уместиться в указанный блок.

Это касается не только svg вставленный с помощью img но с помощью svg тега, например:


В первом варианте четкие границы, второй побольше нечеткие, один и тот же svg с разным разрешением.
Быть может я чегото не знаю, поэтому сам подписался на вопрос.

nanobar.js все давно уже сделано.
Увеличиваете % при прокрутке и все.