ul.diapo li{
     position:relative;float:left;
     width:100px;height:100px;padding:10px;list-style:none;
}
/*permet de créer deux lignes*/
ul.diapo li:nth-child(4n){clear:left;} 
          
ul.diapo li a{
     display:block;overflow:hidden;
     width:100px;height:100px;
     margin-top:0px;margin-left:0px;
     border:0px solid rgba(0,0,0,0.7);
     transition-property:width,height,margin,z-index,border;
     transition-duration:0.4s;
}

ul.diapo li a:hover{
     position:absolute;
    width:320px;height:240px;
     margin-top:-156px;margin-right:-56px;
     z-index:100;
     border:6px solid rgba(0,0,0,0.7);
}
          
ul.diapo li a img{
     position:absolute;
     width:100px;height:100px;z-index:20;
     transition-property:width,height,z-index;
     transition-duration:0.4s;
}
          
ul.diapo li a:hover img{
     width:320px;height:240px;
     z-index:100;
}