Plein écran C

Images au ratio 16/9 au clic maintenu; il me faut revoir ma copie pour le survol simple !

<div style="width:800px; height:90px; margin:1vh auto;">
<p id="agr1" class="agr">&nbsp;</p>
<p id="agr2" class="agr">&nbsp;</p>
<p id="agr3" class="agr">&nbsp;</p>
<p id="agr4" class="agr">&nbsp;</p>
</div>

<style><!--
.agr{position:absolute; z-index:1; width:160px; height:90px; border: 6px ridge white; transition:all 1s linear;}
#agr1{box-sizing:border-box; transform:translate(0px,0px); background:url('http://ekladata.com/zWIC1idiUHk7RwVcD0vp25uk-YM.jpg');background-size:cover;}
#agr2{box-sizing:border-box; transform:translate(200px,0px); background:url('http://ekladata.com/B0AV6F23zpi6en3WNVH6h0V_uus.jpg');background-size:cover;}
#agr3{box-sizing:border-box; transform:translate(400px,0px); background:url('http://ekladata.com/qQB2Bcv8IjAhKMneK7fRVFHVfC8.jpg');background-size:cover;}
#agr4{box-sizing:border-box;  transform:translate(600px,0px); background:url('http://ekladata.com/awslRuvqwGr4DQdwKg34o0NEpcI.jpg');background-size:cover;}
#agr1:active,#agr2:active,#agr3:active,#agr4:active{z-index:100; width:100vw; height:56.25vw; transform:translate(0px,0px); left:0px;}
--></style>