Замостить изображение цветом CSS

#javascript #html #css

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


Вот как этот кусок карты.
    

Ответы

Ответ 1

Делаешь картинку в svg.
Складываешь интересующие регионы в группы g с некоторым классом.
По этому классу на :hover в css меняешь fill для path.


Примерно так (класс не стал делать, т. к. карту нагуглил - и так его ещё ужимать
пришлось):



html, body, svg {
  height: 100%;
  width: 100%;
  display: block;
  margin: 0;
}

.c {fill: #fff;}
.d {fill: #c30;}
.e {fill: #8b0000;}
.f {fill: gold;}
.g {fill: #f66;}

path:hover {
  fill: blue;
}



Ответ 2

Предлагаю обойтись area

Есть плюс в том, что можно использывать href=

вот пример:

Пример при навидении

Как создавать map area:
Генератор для создания при помощи наложения рисунков

Наберите в гугле или яндексе map area html и найдёте кучу примеров