How can i make a better image transition?

Opacity method is not ok because it causes the images to blink
or im doing something wrong. if so, please help :)

<img  id="image1">
        <img  id="image2">

.image {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            pointer-events: all;
            border-radius: 12px;
            background: black;
            height: 90vh;
            transition: opacity 0.5s linear;
        }
        .hidden {
            opacity: 0;
        }

var cycled = false;
        function getActiveImage() {
            return document.getElementById(cycled ? "image1" : "image2");
        }
        function displayImage(img) {
            getActiveImage().src = img;
            document.getElementById("image1").classList.toggle("hidden");
            document.getElementById("image2").classList.toggle("hidden");
            cycled = !cycled;
        }

CodePudding user response：

issue resolved. turns out images aren't blending properly
so i made one image an overlay; same code, but without toggling image1 class