Temporisation survol image

Bonjour et merci pour ces tutos.
Je suis un débutant de 61 ans donc j'ai une question simpliste mais qui me bloque.
J'ai deux images l'une sur l'autre, au passage de la souris la seconde couvre la première, mais je trouve la transition un tantinet abrupte, comment temporiser ce passage svp ?
mon code :

Peut-être y a t il plus simple,
merci d'avance,
Lino

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
    </script>

[/i][/i][/i][/i][/i][/i]

Bonsoir Nogir,
une solution serait :
1. créer 2 class qui modifient l'opacity:0 et 1 avec un effet de transition:opacity ease 0.5s
2. superposer en position:absolute 2 img avec un class différent
3. appliquer le changement de class des img par javascript lors d'un event

On peut même en développant, créer un diaporama automatique (assez simple de conception) avec quelques commandes plutôt fluides d'apparence et opportunes d'emploi :
http://sentrais.eu/diaporama_v-8/diaporama-8.htm
Modifié par pictural (19 Nov 2016 - 20:47)