Загрузить изображение не как прямоугольник

Question

Есть ли способ загрузить изображение не в виде прямоугольника? У меня есть какое-то изображение зданий, похожих на это, и я хочу сделать эффект наведения только на красную область. Это будет еще одна картинка с opacity: 0 и opacity: 1 при наведении.

РЕДАКТИРОВАТЬ:

Для тех, кто ищет Для решения аналогичной проблемы все ответы заставили меня задуматься. clip-path может выполнять эту работу, но имеет плохую поддержку браузера. <map> не очень полезен, если я хочу изменить цвет фона et c. выбранной области. Для меня лучше всего использовать SVG с polygons. Область SVG имеет тот же размер, что и мое фоновое изображение, а полигоны соответствуют областям, которые я хочу. Масштабирование также выполняется сразу, и можно использовать CSS.

Answer 1

Что вы можете сделать, это использовать html map с областью , чтобы получить эффект при наведении:

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://i.stack.imgur.com/8fhAK.jpg" usemap="#image-map">

<map name="image-map">
    <area target="" alt="My hover element" title="My hover element" href="" coords="764,748,621,494,620,409,1040,317,1108,365,755,453,872,619,888,716" shape="poly">
</map>

Я использовал инструмент https://www.image-map.net/ для его генерации.

Answer 2

Вы можете закрепить изображение на пути - например, работает как маска в фотошопе. Таким образом, вы должны нарисовать путь вокруг области и обрезать изображение по этому пути.

https://css-tricks.com/almanac/properties/c/clip-path/

img {
  clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

Обратите внимание, что поддержка браузера не так хороша, так что вам лучше использовать прозрачный файл .png. https://caniuse.com/#feat = css -Clip-путь