Кружочки не видны, но видны при наведении, как сделать чтобы были видны всегда
.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;
}