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

[Владимир228]

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

 

[eroshka]

.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%, чтобы оно было круглым.

 

[кир4444]

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

.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;
}

 

[snaiper24]

Че

 

[Strogg52]

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

 

[счччччччччы]

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