cssfish

в css добавляете класс для активного элемента

.project { display:none;}
.project.is-active { display:block;}

переключаете (например JQ)

$(".button .title").on("click", function(){
 var ind = $(this).index();
 $(".project")
    .removeClass("is-active")
    .eq(ind).addClass("is-active");
  return false;
});

upd:
на практике лучше переписать на универстальные классы, tabs например

Если используете absolute то указывайте, куда ему прилипать, влево или вправо. И у казание ширины и translate вообще не нужно

если к атрибутам svg доступа нет то можно так:

.qr-code svg {
  display: block;
  transform: scale(calc(400 / 1080));
  transform-origin: 0 0;
}

p.s.
ну и overflow: hidden; для .qr-code

если дело в перекрытии, то туману дайте:
pointer-events: none

Потому что минимальное значение для детей в flex&grid берется по контенту.
Т.е. что бы не вылазило, переопределяем минимальное значение, в данном случае - высоту.
.parent > * { min-height: 0; }

Далее аналогично для внутреников правой...
.parent .item-2 div { min-height: 0; }

можно писать стили для условного класса .button так, чтобы они работали и для A, и для BUTTON, и даже для INPUT (с type = button) одинаково. Хотя, конечно, сейчас такое оформление бывает, что инпуту все детали не прикрутишь, ну да и ладно - ссылки или button должно хватить для всего. А далее в верстке/на проекте применяешь с этим классом нужный тэг по вкусу/желанию/назначению.

а насчет с помощью какие правил делать - так зависит от задачи. "просто кнопке" хватит паддингов, если кнопку надо ровнять по высоте с инпутами или еще чем - надо фиксировать высоту. всегда - от задачи.

можно применить jquery.gray.js
это по сути готовый компонент, у него обычный css с фильтрами и прочим, как у вас. А ie10+ он детектит встроенным модернайзером и генерит svg. всего 6 кб

alternate

либо анимашку делаем не от 0 к 100% например, а от 0 к 50% и затем на 100% ставим первоначальное значение

либо можно на само состояние :hover вешать анимацию

в любом случае, с фидлом было бы лучше