Вопрос Как сделать background на круглое изображение в css?

Хочу сделать так, чтобы круглое изображение изначально было скрыто полупрозрачным черным цветом, а при наведении темный цвет скрывался. Не совсем понимаю, как наложить цвет на круглое изображение.

.img-container {
position: relative;
width: 150px;
height: 150px;
}

.img-container img {
border-radius: 50%;
width: 100%;
height: 100%;
}

.img-container::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
border-radius: 50%;
transition: background 0.3s ease-in-out;
}

.img-container:hover::after {
background: transparent;
}
В этом примере .img-container - это контейнер для вашего изображения. Псевдоэлемент ::after используется для создания полупрозрачного черного фона поверх изображения. Когда на контейнер наводят курсор, фон становится прозрачным благодаря свойству hover. Это должно работать для любого круглого изображения, которое вы поместите внутрь .img-container. Убедитесь, что ваше изображение имеет border-radius: 50%, чтобы оно было круглым.

Обрезка изображения с помощью окружности

.image-container {
position: relative;
display: inline-block;
}

.circle {
position: absolute;
top: 0;
left: 0;
height: 300px;
width: 300px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
opacity: 1;
transition: opacity 0.3s ease;
}

.circle:hover {
opacity: 0;
}

img {
display: block;
max-width: 100%;
height: auto;
border-radius: 50%;
overflow: hidden;
}

Че

Не профи, но вроде работает.

не ниче круглова ни в компе, ни в вебе конкретно.