alvvi

Отслеживать наличие класса можно методом $(element).hasClass('class-name');
Возвращает, естественно, булеове значение.

А какая, собственно говоря, разница картинками оно или текстом?

Насколько я вижу это просто анимированный div с заданными фиксированными размерами, сверху на него вы можете хоть инлайн svg поместить, разницы не будет.

Если интересует сама анимация, то она есть в source-файлах этого же сайта

.loader__logo--white {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  background-image: url(/img/global/omnam_logo-white.png);
  -webkit-animation-name: loading;
  animation-name: loading;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-play-state: playing;
  animation-play-state: playing;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@keyframes loading {
  0% {
    width: 0%;
    opacity: 1;
  }
  60% {
    width: 100%;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

Если заменить свойство

background-image: url(/img/global/omnam_logo-white.png);

на
background-color: #fff;

то все будет по-прежнему работать.

В документации к плагину указан метод
$.colorbox.resize();
, вызов которого по умолчанию пытается растянуть pop up по контенту.

Опционально, методу можно дать фиксированные аргументы:

$.colorbox.resize({
  width: "500px",
  height: "500px"
});

Таким образом, можно задать фиксированные размеры, вызывая метод на определенном разрешении с помощью jQuery.

Исходя из документации, доступ к элементам так же можно получить через CSS. Проинспектируйте pop-up с помощью инструментов разработчика, чтобы получить нужные классы, затем задайте им требуемые стили в вашем CSS файле. (+используйте медиа-запросы для разных разрешений)

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

$('.class').hover(function () {
  $(this).addClass('active');
  if( $(this) != $('.class').first() ) { 
   $('.div').css('display', 'none');
 }
});

or

$('.class').not(':first-child').hover(function () {
  $(this).addClass('active');
   $('.div').css('display', 'none');
});

Я с вебпаком знаком всего пару дней, но видел в документации компиляцию такого вида:module.exports = [{ }, { }, { }];
, которая, по сути, будет принимать несколько конфигов, которые, скорее всего, можно настроить нужным вам образом, но на практике таким пока не пользовался.

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