Изменить изображение с переходом с помощью ванильного JavaScript ⇐ CSS

[Anonymous]

Я создаю изображения, которые меняются при нажатии, но не знаю, как создать эффект постепенного появления/затухания для переключения изображений. Мне нужны поля «до» и «постобработка», чтобы показать пользователям, как мой клиент работает с фотографиями. Я использую начальную загрузку для этого проекта.
Я пробовал это, а также пытался добавлять и удалять классы, чтобы добиться эффекта, но эффекта все равно нет

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

function swap(t) {
if (t.src != t.getAttribute('data-secondImg')) {
t.old = t.src;
t.src = t.getAttribute('data-secondImg');

} else {
t.src = t.old;
}
}

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

.post-production-container {
position: relative;
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
transform-style: preserve-3d;
perspective: 500px;
margin: auto;
}

.post-production-container .box {
position: relative;
width: 250px;
height: 250px;
background: #000;
transition: 0.5s;
transform-style: preserve-3d;
overflow: hidden;
margin-right: 15px;
margin-top: 45px;
transition: 2s all;
}

.post-production-container .box .imgBx {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.post-production-container .box .imgBx img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: all;
z-index: 2;
transition: 2s;
}

.post-production-container .box .content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
padding: 20px;
align-items: flex-end;
box-sizing: border-box;
}

.post-production-container .box .content h2 {
color: #fff;
transition: 0.5s;
text-transform: uppercase;
margin-bottom: 5px;
font-size: 20px;
transform: translateY(200px);
transition-delay: 0.3s;
}

.post-production-container .box:hover .content h2 {
transform: translateY(0px);
}

.post-production-container .box .content p {
color: #fff;
transition: 0.5s;
font-size: 14px;
transform: translateY(200px);
transition-delay: 0.4s;
}

.post-production-container .box:hover .content p {
transform: translateY(0px);
}

@media (min-width: 500px) {
.post-production-container:hover .box {
transform: rotateY(25deg);
}
.post-production-container .box:hover~.box {
transform: rotateY(-25deg);
}
.post-production-container .box:hover {
transform: rotateY(0deg) scale(1.25);
z-index: 1;
box-shadow: 0 25px 40px rgba(0, 0, 0, 0.5);
}
}

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

[img]./assets/img/prima-dopo/ferrero-prima.jpg[/img]


Image Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi accusamus molestias quidem iusto.





[img]./assets/img/prima-dopo/coppette-prima.jpg[/img]


Image Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi accusamus molestias quidem iusto.

Заранее всем спасибо

Подробнее здесь: https://stackoverflow.com/questions/775 ... javascript