Barrettes

Pour me rappeler des grades militaires... Survolez le montage.

L'adresse de l'image est placée dans un code "class" et chaque partie (sk1/2/3/4) va en sélectionner une partie par background-position.

Le bouton invisible (bt) est placé au dessus du montage et son survol commande les 4 parties, qui reprennent leur position et taille respectives.

<div id="fd">
<p id="bt">&nbsp;</p>
<p id="sk1" class="zz">&nbsp;</p>
<p id="sk2" class="zz">&nbsp;</p>
<p id="sk3" class="zz">&nbsp;</p>
<p id="sk4" class="zz">&nbsp;</p>
</div>

<style><!--
#fd{width:1150px; height:648px; border:4px ridge grey; background:url('https://ekladata.com/Flt7ezaJN_x4RPguAc1Wb9377DY.jpg'); margin:10px auto;}
#bt{position:absolute; z-index:10; width:1150px; height:648px; transform:translate(0px,0px);}
.zz{background:url('https://ekladata.com/Af8autgvHW6CxlMxNCqEXIAy6GA.jpg');}
#sk1{position:absolute; z-index:1; transition:all 1s linear; width:100px; height:400px; border:1px solid black; background-position:0% 0%; transform:translate(200px,100px) rotatex(25deg) skewx(25deg);}
#sk2{position:absolute; z-index:1; transition:all 1s linear; width:100px; height:400px; border:1px solid black; background-position:33.3% 0%; transform:translate(400px,100px) rotatex(25deg) skewx(25deg);}
#bt:hover ~ #sk1{width:282px; height:648px; border:none;transform:translate(0px,0px) rotatex(0deg) skewx(0deg);}
#sk3{position:absolute; z-index:1; transition:all 1s linear; width:100px; height:400px; border:1px solid black; background-position:66.6% 0%; transform:translate(600px,100px) rotatex(25deg) skewx(25deg);}
#sk4{position:absolute; z-index:1; transition:all 1s linear; width:100px; height:400px; border:1px solid black; background-position:100% 0%; transform:translate(800px,100px) rotatex(25deg) skewx(25deg);}
#bt:hover ~ #sk1{width:287px; height:648px; border:none;transform:translate(0px,0px) rotatex(0deg) skewx(0deg);}
#bt:hover ~ #sk2{width:288px; height:648px; border:none; transform:translate(287px,0px) rotatex(0deg) skewx(0deg);}
#bt:hover ~ #sk3{width:287px; height:648px; border:none;transform:translate(575px,0px) rotatex(0deg) skewx(0deg);}
#bt:hover ~ #sk4{width:288px; height:648px; border:none; transform:translate(862px,0px) rotatex(0deg) skewx(0deg);}
--></style>