Кружочки не видны, но видны при наведении, как сделать чтобы были видны всегда

.collab-block {
  border: 2px solid rgb(33, 33, 33);
  border-radius: 16px;
  width: 512px;
  /* Ширина блока */
  height: 220px;
  /* Высота блока */
  display: flex;
  flex-direction: column;
  /* Располагаем элементы по вертикали */
  align-items: center;
  /* Центрируем элементы по горизонтали */
  position: relative;
  /* Для позиционирования заголовка */
  overflow: hidden;
  /* Скрытие лишней части изображения, если необходимо */
}

.collab-block img {
  position: absolute;
  /* Абсолютное позиционирование */
  top: 50%;
  /* Центрирование по вертикали */
  left: 50%;
  /* Центрирование по горизонтали */
  width: 100%;
  /* Растягивание на всю ширину */
  height: 100%;
  /* Растягивание на всю высоту */
  object-fit: cover;
  /* Обеспечивает сохранение пропорций и заполнение блока */
  transform: translate(-50%, -50%);
  /* Центрирование изображения */
  z-index: -2;
}

.header {
  color: white;
  /* Цвет текста заголовка */
  margin-top: 40px;
}

.logo-container {
  display: flex;
  /* Используем flexbox для размещения кружочков */
  justify-content: center;
  /* Центрируем кружочки по горизонтали */
}

.logo-circle {
  width: 80px;
  /* Диаметр кружочка */
  height: 80px;
  /* Диаметр кружочка */
  margin-top: 0px;
  margin-right: 16px;
  /* Отступ между кружочками */
  border: 2px solid rgb(255, 255, 255);
  border-radius: 50%;
  /* Закругление для создания круга */
  overflow: hidden;
  /* Обрезаем содержимое, выходящее за пределы кружочка */
  display: flex;
  /* Используем flexbox для центрирования логотипов внутри кружочков */
  justify-content: center;
  /* Центрируем содержимое по горизонтали */
  align-items: center;
  /* Центрируем содержимое по вертикали */
  transition: transform 1s ease;
  /* Плавный переход для трансформации */
}

.logo-circle:hover {
  transform: rotate(360deg);
  /* Вращение на 360 градусов при наведении */
}

.logo-circle img {
  width: auto;
  /* Устанавливаем ширину изображения на авто для сохранения пропорций */
  height: 100%;
  /* Высота изображения равна высоте кружочка */
  object-fit: cover;
  /* Обрезаем изображение, сохраняя его пропорции */
  z-index: -3;
}
<div class="collab-block">
  <h2 class="header">Worked At</h2>
  <div class="logo-container">
    <a href="https://colizeumarena.com/" class="logo-circle" target="_blank" rel="noopener noreferrer">
      <img src="Images/cls_logo.png" alt="Logo 1">
    </a>
    <a href="https://vk.com/flame_servers" class="logo-circle" target="_blank" rel="noopener noreferrer">
      <img src="Images/flameservers_logo.png" alt="Logo 2">
    </a>
    <a href="https://3f-catering.ru/" class="logo-circle" target="_blank" rel="noopener noreferrer">
      <img src="Images/3f_logo.svg" alt="Logo 3">
    </a>
  </div>
  <img src="Images/background-two.png" alt="back">
</div>
</div>


Ответы (1 шт):

Автор решения: Виктор Карев

Нужно добавить position:

.logo-circle {
    ...
    position: relative;
}
→ Ссылка