Маска css для произвольной картинки

Сергей Дмитриев

Приветствую, коллеги! Есть такая тема:

<a href='https://hostingkartinok.com/show-image.php?id=64e241251dcae4bdc003765eb2952924' title='picture hosting'><img src='https://s8.hostingkartinok.com/uploads/thumbs/2017/09/64e241251dcae4bdc003765eb2952924.png' alt='Yes' /></a>

Ничего особенного: вставляем картинку, получаем ее увеличенного полупрочзрачного двойника, а также двойка под маской. Двоник под маской получен следующим образом:

.promo__image-mask {
  position: absolute;
  top: -120px;
  left: 155px;

  width: 313px;
  height: 523px;

  clip-path: url("../img/mask.svg#clip");
}

.promo__image-mask::before {
  content: "";
  position: absolute;

  width: 313px;
  height: 523px;

  background-color: #2a2a2a;
}

.promo__image-mask::after {
  content: url("../img/velo.png");
  position: absolute;
  top: 65px;
  left: -30px;

  width: 313px;
  height: 523px;

  filter: grayscale(100%) opacity(25%);
}

То есть, есть у нас пустой элемент, у него один псевдоэлемент просто содержит серый фон, второй - картинку с фильтрами прозрачности и монохрома. Далее на сам элемент вешается свг маска. Но вот беда...свойство clip-path работает только в фаерфокс. А в остальных браузерах видим следующее:

<a href='https://hostingkartinok.com/show-image.php?id=ecf1159430b5641eb6dd2fc876b2cb0d' title='imagehost'><img src='https://s8.hostingkartinok.com/uploads/thumbs/2017/09/ecf1159430b5641eb6dd2fc876b2cb0d.png' alt='Yes' /></a>

Какие кому приходят варианты осуществления задумки. Заранее всех благодаря за участие!

1 чел.