Создайте изображение клипа для маски src с помощью html / css

Question

Я хочу создать маску изображения, используя только HTML и CSS.Не используется svg или фоновое изображение.

Маска клипа должна применяться с <img src='">.Я не могу добиться этого без фонового изображения.

.pic-mask {
    position:relative;
}
.pic-mask:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(63, 72, 48, 0.8);
    -moz-transition: background .3s linear;
    -webkit-transition: background .3s linear;
    -ms-transition: background .3s linear;
    -o-transition: background .3s linear;
    transition: background .3s linear;
}

<div class="pic-mask">
<img src="https://im.ezgif.com/tmp/ezgif-1-1bf1c27255.jpg" width="500">
</div>

Мой ожидаемый результат, как показано на рисунке ниже

Answer 1

Вы должны установить динамическую ширину и высоту изображения, попробуйте что-то вроде этого:

Html:

<div class="image-container">
 <div class="pic-mask">
  <img src="https://im.ezgif.com/tmp/ezgif-1-1bf1c27255.jpg">
 </div>
</div>

CSS:

.image-container img {
  width:100%;
  height:100%;
}
.pic-mask {
    position:relative;
}
.pic-mask:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(63, 72, 48, 0.8);
    -moz-transition: background .3s linear;
    -webkit-transition: background .3s linear;
    -ms-transition: background .3s linear;
    -o-transition: background .3s linear;
    transition: background .3s linear;
}

Если вы хотите ограничить ширину изображения, вы можете сделать это на контейнере изображения, например:

.image-container {
  max-width:500px;
}

Причина в том, что pic-mask является абсолютной по отношению к относительному родительскому элементу, и справа: 0 поместит его в 0px справа от его относительного родительского элемента, но само изображение будет установлено на меньшую ширину, чем родительский элемент.