Как при наведении на картинку сделать под ней фон в виде окружности?

Question

[Алексей]

Всем привет. Бьюсь с тривиальной задачей уже сутки. К сожалению, не силен в CSS, поэтому получается какая-то лажа. Суть в следующем: я сделал подобие категорий, как на сайте Юла, и мне требуется - при наведении на категорию подсвечивать ее фоном из окружности.

Сейчас так: клик

А хочется сделать так: клик

Гуру CSS, подскажите, как это проще реализовать?

Answer 1

[Dino Winchester]

Вариант первый:



В данном примере при наведении на блок, меняется цвет фона у псевдоэлемента, который находится на заднем фоне изображения. Псевдоэлемент можно заменить например SVG фигурой, чтобы добиться похожего визуального эффекта как на сайте Юла.

Вариант второй:



В данном примере при наведении на блок, меняется цвет заливки у SVG вектора.

Comments

[Алексей]

Немного не то. Здесь вы выделяете бордер при наведении. Задача стоит другая.

[Dino Winchester]

Алексей, это не border, а псевдоэлемент на заднем фоне изображения. Можно конечно и background менять у родительского блока при наведении, чтобы не использовать псевдоэлемент.

Обновил ответ.

[Сергей Сергей]

Надо иконку с прозрачностью поставить вместо мишки, будет яснее.

[Dino Winchester]

Сергей Сергей, да, это точно. Просто подумал что ТС догадается это сделать, но видимо - это оказалось сложной задачей.

[Алексей]

Mizutsune, ТС догадался, как это сделать. Просто не указал, что фон окружности изначально задан в svg, и при наведении необходимо менять его fill из рандомных цветов, прописанных в php функции. Но это полностью мой косяк, ваше решение отличное, спасибо!

[Dino Winchester]

Алексей, окей.

Answer 2

[Spaceoddity]

https://codepen.io/nanto-work/pen/jOzJgjo

Comments

[Алексей]

Немного не то. Видимо я неправильно сформировал вопрос

[Вадим]

Алексей,

Видимо я неправильно сформировал вопрос

Или не понимаете ответ.
Чем Вам эта демка не подходит? Ставите картиинку вместо текста и вуоля, всё как на примере. Разве нет?

[Алексей]

Вадим, увы, нет. В общем я все таки сделал, выглядит так: Клик

[Вадим]

Алексей, Здорово. Напиши в ответы на вопрос что сделали и отметье решением, чтобы одни пользователи сервиса не тратили время, а другие, кто столкнётся с подобным вопросом - увидели решение и не задавали вопрос заного.