单击后数组对img的不透明度或fadein效果/javascript

我有一个问题,点击并更改照片后,img上的过渡不透明度。 我制作了一个简单的滑块,可以从阵列中拍照。 如何将不透明度从0添加到1,过渡为1? 我尝试在js和css中添加样式,但仍然不起作用。 我在上面坐了几个小时。

<button id="prev" class="btn-navi"></button>
<div id="my-image-slider"></div>
<button id="next" class="btn-navi"></button>        

#cert #my-image-slider{
 height: 200px;
 width: 150px;
 background-color: aqua;
 /*opacity: 0;*/
 /*transition: all 3s ease;*/
}
#cert #my-image-slider img{
 height: 100%;
 width: 100%;
 opacity: 0.1;
 transition: all 2s ease;
}

var images = [];
    images.push("<img src ='img/dyplom1.jpg'>");
    images.push("<img src ='img/dyplom2.jpg'>");
    images.push("<img src ='img/dyplom3.jpg'>");

    var curIndex = 0 ;
    var mainDiv = document.getElementById("my-image-slider");
    var nextBtn = document.getElementById("next");
    var prevBtn = document.getElementById("prev");

    mainDiv.innerHTML = images[0];

    function getElement() {
        mainDiv.innerHTML = images[curIndex];
        /*images.style.opacity = 1;*/
    };

    function goNext() {
        var nextIndex = curIndex + 1;
        if (nextIndex === images.length) {
            return 0;
        } else {
            return nextIndex;
        }
    };

    nextBtn.addEventListener("click", function () {
        curIndex = goNext();
        getElement();
    });

    function goPrev() {
        var prevIndex = curIndex - 1;
        if (prevIndex === -1) {
            return images.length-1;
        } else {
            return prevIndex;
        }
    };

    prevBtn.addEventListener("click", function () {
        curIndex = goPrev();
        images.style.opacity = 1;
        getElement();
    });