Это должно выглядеть как на изображении ниже, но кроме того необходимо, чтобы при наведении эта рамка сложной формы вращалась на 360 градусов.(изображение животного имеет прямоугольную форму и размеры больше размеров рамки) Я пробовал это сделать следующим образом:
1)
HTML
<div class="img-wrapper">
<img src="assets/img/pets-in-zoo/panda.svg" alt="panda" class="pet-pic">
</div>
CSS
.img-wrapper {
width: 331.9px;
background: url(assets/img/pets-in-zoo/img-wrapper.svg);
overflow: hidden;
}
HTML
<div class="img-wrapper">
</div>
CSS
.img-wrapper {
width: 331.9px;
background: url(assets/img/pets-in-zoo/panda.svg) no-repeat center/cover;
-webkit-image-mask: url(assets/img/pets-in-zoo/img-wrapper.svg);
}
HTML
<div class="img-wrapper">
</div>
CSS
.img-wrapper {
width: 331.9px;
background: url(assets/img/pets-in-zoo/panda.svg) no-repeat center/cover;
}
.img-wrapper::before {
width:100%;
height: 100%;
background: url(assets/img/pets-in-zoo/img-wrapper.svg) no-repeat center/cover;
mix-blend-mode: screen;
}
``` этот способ я сам не понял, но попробовал, однако все так-же не работает.