Добавить эффект тени к изображению ⇐ CSS

[Anonymous]

Вот код для вставки изображения в анимационный кадр. Код работает нормально, за исключением одной досадной проблемы, которую я не нашел решения.

Мне нужен эффект тени поверх изображения. , но неожиданно сейчас оно находится под изображением. вот CSS box-shadow в .box .content

Код: Выделить всё

box-shadow: 0 0 0.262vh deeppink, 0 0 0.6553vh rgba(0, 0, 0, 1), inset 0 0 0.6553vh rgba(0, 0, 0, 1);

И вот код: (Я пробовал z-index разными способами, но думаю, что мне нужна рука, чтобы правильно его использовать!)

Код: Выделить всё

const content = document.querySelector('.content');
let image = document.createElement('img');
content.appendChild(image);
image.id = 'shot';
image.src = 'https://static01.nyt.com/images/2020/01/30/t-magazine/oakImage-1580415371326/oakImage-1580415371326-superJumbo.jpg';
let shot = document.getElementById("shot");
shot.onload = function() {

imageWidth = this.naturalWidth;
imageHeight= this.naturalHeight;

//console.log(imageWidth, imageHeight);

let viewPortClipWidth = imageWidth * (100 / document.body.clientWidth);
let viewPortClipHeight = imageHeight * (100 / document.body.clientHeight);

//console.log(viewPortClipWidth, viewPortClipHeight);

document.querySelector('.box .content').style.width = `${viewPortClipWidth}vw`;
document.querySelector('.box .content').style.height = `${viewPortClipHeight}vh`;

}

Код: Выделить всё

img {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}

body {
height: 100vh;
margin:0;
display: flex;
align-items: center;
justify-content: center;
background-color: #11151a;
}

.box {
border-radius: 0.5vh;
position: relative;
overflow: hidden;
}

.box::after {
content: '';
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background:
repeating-linear-gradient(-45deg, white 0  0.48828125vw, #f00c36 0 0.9765625vw) 0 0/1.380859375vw 1.380859375vw;
width: calc(100% + 1.380859375vw);
height: calc(100% + 1.380859375vw);
transform: translate(-1.380859375vw, -1.380859375vw);
will-change: transform;
animation: animate 4s linear infinite;
}

.box .content {
position: relative;
max-width: 93vw;
max-height: 89vh;
box-shadow: 0 0 0.262vh deeppink, 0 0 0.6553vh rgba(0, 0, 0, 1), inset 0 0 0.6553vh rgba(0, 0, 0, 1);
margin:0.3vw;
}

@keyframes animate {
to {
transform: translate(0, 0);
will-change: transform;
}
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/603 ... -the-image