JavaScriptをmy cssと組み合わせてimagechangeに効果を追加する

Question

javascriptで画像を変更し、fade効果を追加したいと思います。 これは、フェード効果のための私のcssです：

var image=document.getElementById("image"); 
 
    var currentPos = 0; 
 
    var images = ["foto1.jpg","foto2.jpg","foto3.jpg"] 
 

 
    function volgendefoto() { 
 
     if (++currentPos >= images.length) currentPos = 0; 
 
     image.src = images[currentPos]; 
 

 
    } 
 

 
    setInterval(volgendefoto, 4100);

#map { 
 
     height:1000px; 
 
     width:1000px; 
 
     background:black; 
 
    } 
 
    #overlay { 
 
     z-index:2; 
 
     background:white; 
 
     height:1000px; 
 
     width:1000px; 
 
     opacity:0; 
 
     -webkit-transition: opacity 0.1s; 
 
     -ms-transition: opacity 0.1s; 
 
     -moz-transition: opacity 0.1s; 
 
     -o-transition: opacity 0.1s; 
 
     transition: opacity 1s; 
 
     margin-top:-1000px; 
 
    
 
     transition-delay: 0.1s; 
 
     -webkit-transition-delay: 0.1s; 
 
    } 
 
    #overlay:hover { 
 
     opacity:.8; 
 
     transition-delay: 0s; 
 
     -webkit-transition-delay: 0s; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='map'> 
 
     <img id="image" src="foto1.jpg"> 
 
     <div id='overlay'></div> 
 
    
 
    </div>

それは我々が反応するウェブサイトを作っているので、私はそのサイトにこれを追加するつもりです学校のプロジェクトのためです。

Answer 1

ホバー上の画像にフェードアウト効果を与えるコードを試してみました。

[You can see the output below][1] 


    [1]: https://jsfiddle.net/cxLjLnu8/1/ "Output here" 

これはあなたがやったことですか？

フェードインする必要があるのは、 またはフェードアウトの効果ですか？ と あなたはホバーに、または画像をスライドさせるときに効果が必要ですか？