Toy Boy

Возможно стоило в вашем вопросе привести пример кода CSS и SVG.

Работает это примерно так:

.icon:hover {
    fill: red;
}

<svg class="icon">
    ...
</svg>

И вероятнее всего, если все сделано правильно, но внутри вашего сайта это не работает, значит либо стили где-то переназначаются, либо вообще не подключены

Вероятно, причина в том, что для всех дисплеев используется один и тот же файл изображения, обычно максимального разрешения. Согласитесь, что грузить картинку, допустим, 1920х1080 px на мобильное устройство -- не лучшая идея; достаточно и 800х600.

Воспользуйтесь srcset:

https://developer.mozilla.org/ru/docs/Learn/HTML/M...

Завернуть функции фильтров в ready

Вот так

$(function() {
  const worksSlider = $('[data-slider="slick"]');

    /* Filter
    =====================*/
    let filter = $("[data-filter]");

    filter.on("click", function(event) {
        event.preventDefault();
        changeBlocksVisibility($(this).data('filter'))
    });
  });

$().ready(() => changeBlocksVisibility("female"));

function changeBlocksVisibility(cat = 'all') {
        if(cat == 'all') {
            $("[data-cat]").removeClass("hide");
        } else {
            $("[data-cat]").each(function() {
                let workCat = $(this).data('cat');

                if(workCat != cat) {
                    $(this).addClass('hide');
                } else {
                    $(this).removeClass('hide');
                }
            });
        }
}

Типо 2 вопроса в одном? не лучший способ спрашивать про css и ставить тег javascript...

1. Плавность: Указать конкретно что именно должно быть transition
Например max-height у блока

.accordion__item {
    margin-bottom: 10px;
    border: 1px solid #e5e5e5;
    max-height: 46px;
    transition: max-height .2s ease-out;
    overflow: hidden;
}

.accordion__item.active {   
    max-height: 500px;
    transition: max-height .5s ease-in;
}

2. контент сдвигаеться тк появляется скроолл справа
можно починить зафиксировав скрол вот так:

body {
  max-width: 1400px;
  margin: 0 auto;
  overflow-y: scroll;
}

или убрать скрол совсем изменив нижнюю строчку: overflow-y: hidden;