Votre pourcentage /2

Voyons comment modifier un code simple, en unités adaptatives: passons de 80% de la résolution de l'écran de lecture à 40%. Survolez les boutons.

Voici un montage avec 3 images, aucune placée en fond de boîte, pour que ce soit plus clair.

2 boutons à survoler modifient l'opacité de 2 images, la troisième étant visible et fixe.

<div style="width: 80vw; height: 92vh; margin: 2vh auto; border: 0.3vh ridge white;">
<p id="chg2">&nbsp;</p>
<p id="chg3">&nbsp;</p>
<p id="xp1">&nbsp;</p>
<p id="xp2">&nbsp;</p>
<p id="xp3">&nbsp;</p>
</div>
<style><!--
#chg2{position:absolute; z-index:5; width:4vw; height:6vh; border:0.2vh solid white; background:rgba(255,255,255,0.5); transform:translate(75vw,5vh);}
#chg3{position:absolute; z-index:5; width:4vw; height:6vh; border:0.2vh solid white; background:rgba(255,255,255,0.5); transform:translate(75vw,15vh);}
#xp1{position:absolute; z-index:1; width:80vw; height:92vh; background:url('http://ekladata.com/_KXQDWez8PWu65xew7GE9X1Xtys.jpg'); background-size:80vw 92vh;}
#xp2{position:absolute; z-index:1; width:80vw; height:92vh; background:url('http://ekladata.com/hYz2OAYTHRZdAtES9bpFwMHEC_k.jpg'); background-size:80vw 92vh; opacity:0; transition:all 0.5s linear;}
#xp3{position:absolute; z-index:1; width:80vw; height:92vh; background:url('http://ekladata.com/TuGuQLhwMTUUwskgSEly-u8AKVA.jpg'); background-size:80vw 92vh; opacity:0; transition:all 0.5s linear;}
#chg2:hover ~ #xp2, #chg3:hover ~ #xp3{opacity:1;}
--></style>

Nous retrouvons les unités adaptatives du montage et des images; modifions-les en 40vw/46vh pour obtenir:

<div style="width: 40vw; height: 46vh; margin: 2vh auto; border: 0.3vh ridge white;">
<p id="chg2b">&nbsp;</p>
<p id="chg3b">&nbsp;</p>
<p id="xp1b">&nbsp;</p>
<p id="xp2b">&nbsp;</p>
<p id="xp3b">&nbsp;</p>
</div>
<style><!--
#chg2b{position:absolute; z-index:5; width:2vw; height:3vh; border:0.2vh solid white; background:rgba(255,255,255,0.5); transform:translate(37vw,5vh);}
#chg3b{position:absolute; z-index:5; width:2vw; height:3vh; border:0.2vh solid white; background:rgba(255,255,255,0.5); transform:translate(37vw,10vh);}
#xp1b{position:absolute; z-index:1; width:40vw; height:46vh; background:url('http://ekladata.com/_KXQDWez8PWu65xew7GE9X1Xtys.jpg'); background-size:40vw 46vh;}
#xp2b{position:absolute; z-index:1; width:40vw; height:46vh; background:url('http://ekladata.com/hYz2OAYTHRZdAtES9bpFwMHEC_k.jpg'); background-size:40vw 46vh; opacity:0; transition:all 0.5s linear;}
#xp3b{position:absolute; z-index:1; width:40vw; height:46vh; background:url('http://ekladata.com/TuGuQLhwMTUUwskgSEly-u8AKVA.jpg'); background-size:40vw 46vh; opacity:0; transition:all 0.5s linear;}
#chg2b:hover ~ #xp2b, #chg3b:hover ~ #xp3b{opacity:1;}
--></style>
Les boutons doivent être positionnés et dimensionnés en fonction de la largeur réduite du montage.