Genre onglets

Loneci me demande le code de cet article publié; le voilà en 60vw/33.75vw, au ratio 16/9 et 60% de la largeur de votre écran.

<div style="position: relative; width: 60vw; height: 33.75vw; border: 0.1vh solid black; margin: 2vh auto; background: url('http://ekladata.com/03VLKUcOZCSo6wcl3k5RdM3gl7o.jpg'); background-size: cover; overflow: hidden;"><input id="bt1" class="bt" type="text" value="1" /><input id="bt2" class="bt" type="text" value="2" /><input id="bt3" class="bt" type="text" value="3" />
<p id="pg0">Clic sur chaque onglet <br />puis survol des images.</p>
<div id="pg1">
<p id="gg1">&nbsp;</p>
<p id="gg2">&nbsp;</p>
<p id="gg3">&nbsp;</p>
</div>
<div id="pg2">
<p id="gg4">&nbsp;</p>
<p id="gg5">&nbsp;</p>
<p id="gg6">&nbsp;</p>
</div>
<div id="pg3">
<p id="gg7">&nbsp;</p>
<p id="gg8">&nbsp;</p>
<p id="gg9">&nbsp;</p>
</div>
</div>

<style><!--
.bt{font-size:2vw; width:2vw; height:2vw; border:none; border-radius:2vh 0 0 2vh;box-shadow:inset 0vh 0vh 1vh black; text-align:center; line-height:2vw; color:red!important;}

#bt1{position:absolute; z-index:1; transform:translate(58vw,5vw);}
#bt2{position:absolute; z-index:1; transform:translate(58vw,9vw);}
#bt3{position:absolute; z-index:1; transform:translate(58vw,13vw);}
#pg0{position:absolute; z-index:1; width:40vw; text-align: center; font-size:2vw; transform:translate(10vw,10vw);}

#pg1{position:absolute; z-index:1;width:60vw; height:33.75vw; transform:translate(-60vw,0vw); transition:all 1s linear;}
#pg2{position:absolute; z-index:1;width:60vw; height:33.75vw; transform:translate(-60vw,0vw); transition:all 1s linear;}
#pg3{position:absolute; z-index:1;width:60vw; height:33.75vw; transform:translate(-60vw,0vw); transition:all 1s linear;}

#gg1{position:absolute; z-index:1; width:24vw; height:13.5vw; background:url('http://ekladata.com/xOPSvUkNjIfBceJQzf9WMOAkxmo.jpg'); background-size:cover; margin:0.5vw 2vw; transition:all 1s linear;}
#gg2{position:absolute; z-index:1; width:24vw; height:13.5vw; background:url('http://ekladata.com/zYUPIIt2EWV_XYdEpFFGVo0NGls.jpg'); background-size:cover; margin:10vw 18vw; transition:all 1s linear;}
#gg3{position:absolute; z-index:1; width:24vw; height:13.5vw; background:url('http://ekladata.com/FSoI02AjU-MU1iOYxEf6WETJ-Y0.jpg'); background-size:cover; margin:20vw 33vw; transition:all 1s linear;}
#gg4{position:absolute; z-index:1; width:24vw; height:13.5vw; background:url('http://ekladata.com/94aFXJqGc0xCKBVnFMvNwq1bUf4.jpg'); background-size:cover; margin:0.5vw 2vw; transition:all 1s linear;}
#gg5{position:absolute; z-index:1; width:24vw; height:13.5vw; background:url('http://ekladata.com/DJeZNPDOy2O-N-pSPwLFErZ46cA.jpg'); background-size:cover; margin:10vw 18vw; transition:all 1s linear;}
#gg6{position:absolute; z-index:1; width:24vw; height:13.5vw; background:url('http://ekladata.com/J3oVHlzPcnjaO53RQ924QpJ6wfI.jpg'); background-size:cover; margin:20vw 33vw; transition:all 1s linear;}
#gg7{position:absolute; z-index:1; width:24vw; height:13.5vw; background:url('http://ekladata.com/p5fszkgL4JCpwhLUAZzB9thbZs0.jpg'); background-size:cover; margin:0.5vw 2vw; transition:all 1s linear;}
#gg8{position:absolute; z-index:1; width:24vw; height:13.5vw; background:url('http://ekladata.com/-PzPZ_hhQB8vy0D10prLitvQcOw.jpg'); background-size:cover; margin:10vw 18vw; transition:all 1s linear;}
#gg9{position:absolute; z-index:1; width:24vw; height:13.5vw; background:url('http://ekladata.com/kmyzxgMQxbtqHBNkXAaSwOOFml8.jpg'); background-size:cover; margin:20vw 33vw; transition:all 1s linear;}

#bt1:focus ~ #pg1,#bt2:focus ~ #pg2,#bt3:focus ~ #pg3{z-index:5; transform:translate(0vw,0vw);}
#gg1:hover,#gg2:hover,#gg3:hover,#gg4:hover,#gg5:hover,#gg6:hover,#gg7:hover,#gg8:hover,#gg9:hover{z-index:5; width:60vw; height:33.75vw; margin:0vw 0vw;}
--></style>