Transition

Les codes respectifs:
<div style="width: 1600px; height: 330px; margin: 5px auto; text-align: left;"><img id="tr1" src="https://ekladata.com/njH8poF2trILqy_z0ba6w4g9N5E.jpg" alt="" /> <img id="tr2" src="https://ekladata.com/9DxBEqlzBNaUem57V1P2FOqngJA.jpg" alt="" /></div>

<style><!--
#tr1{position:absolute; z-index:1; width:320px; height:180px; border:6px ridge white; box-shadow:6px 6px 8px black; opacity:0.5; filter:grayscale(1); transform:translate(200px,0px);transition:all 1s linear;}
#tr2{position:absolute; z-index:1; width:320px; height:180px; border:6px ridge white; box-shadow:6px 6px 8px black; opacity:0.5; filter:grayscale(1); transform:translate(800px,0px); transition:transform 1s linear 0.5s, width 1s linear 0.5s, height 1s linear 1.5s, filter 1s linear 2.5s;}
#tr1:hover,#tr2:hover{z-index:5; opacity:1; width:1600px; height:900px; transform:translate(0px,0px); filter:grayscale(0);}
--></style>

 Pour tr1: l'opacité n'a pas de transition et s'affiche dès le survol de même que le positionnement z (profondeur).
La largeur (width), la hauteur (height), le filtre (filter) et le positionnement (transform) s'affichent en 1 seconde, tous en même temps: transition:all 1s linear;

Pour tr2: Idem pour l'opacité et le positionnement z.
Le positionnement et la largeur s'affichent en 1 seconde avec un temps de retard de 0.5 seconde.
La hauteur s'affiche en 1 seconde avec un temps de retard de 1.5 seconde.
Le filtre noir et blanc s'affiche en 1 seconde avec un temps de retard de 2.5 secondes.
transition:transform 1s linear 0.5s, width 1s linear 0.5s, height 1s linear 1.5s, filter 1s linear 2.5s;