12.03.2024

Une variante du code précédent.

<div id="ex">
<p id="sv1" class="sv">&nbsp;</p>
<p id="sv2" class="sv">&nbsp;</p>
<p id="sv3" class="sv">&nbsp;</p>
<p id="sv4" class="sv">&nbsp;</p>
<p id="sv5" class="sv">&nbsp;</p>
<p id="ac0">Survol boutons</p>
<p id="ac1" class="ac">&nbsp;</p>
<p id="ac2" class="ac">&nbsp;</p>
<p id="ac3" class="ac">&nbsp;</p>
<p id="ac4" class="ac">&nbsp;</p>
<p id="ac5" class="ac">&nbsp;</p>
<p id="mgg1" class="mg">&nbsp;</p>
<p id="mgd1" class="mg">&nbsp;</p>
<p id="mgg2" class="mg">&nbsp;</p>
<p id="mgd2" class="mg">&nbsp;</p>
<p id="mgg3" class="mg">&nbsp;</p>
<p id="mgd3" class="mg">&nbsp;</p>
<p id="mgg4" class="mg">&nbsp;</p>
<p id="mgd4" class="mg">&nbsp;</p>
<p id="mgg5" class="mg">&nbsp;</p>
<p id="mgd5" class="mg">&nbsp;</p>
</div>
<style><!--
#ex{width:800px; height:600px; margin:50px auto; text-align:center; font-size:25px; box-shadow:4px 4px 8px black;}
.sv{position:absolute; z-index:10;width:40px; height:40px; border-radius:50%;}
.ac{position:absolute; z-index:1;width:40px; height:40px; border-radius:50%; box-shadow:inset -4px -4px 6px black;}
#ac0{position:absolute; z-index:1; width:120px; font-size:20px; transform:translate(340px,20px);}
#sv1, #ac1{transform:translate(380px,150px);}
#sv2, #ac2{transform:translate(380px,230px);}
#sv3, #ac3{transform:translate(380px,310px);}
#sv4, #ac4{transform:translate(380px,390px);}
#sv5, #ac5{transform:translate(380px,470px);}
.mg{position:absolute; z-index:2; height:600px; border:4px solid white; transition:all 1s;}
#mgg1{box-sizing:border-box; width:350px; background:url('http://ekladata.com/iJdfH3j-ywmDOIO1Hqk6w9prIOw.jpg'); background-size:800px 600px; background-position:0px 0px; transform:translate(0px,0px) perspective(1000px) rotatey(30deg) ; transform-origin:center left;}
#mgd1{box-sizing:border-box; width:350px; background:url('http://ekladata.com/iJdfH3j-ywmDOIO1Hqk6w9prIOw.jpg'); background-size:800px 600px; background-position:-450px 0px; transform:translate(450px,0px) perspective(1000px) rotatey(-30deg) ; transform-origin:center right;}
#mgg2{box-sizing:border-box; width:350px; background:url('http://ekladata.com/qYyhlKzoy9z7Y18Gg7YKwDB25So.jpg'); background-size:800px 600px; background-position:0px 0px; transform:translate(0px,0px) perspective(1000px) rotatey(40deg) ; transform-origin:center left;}
#mgd2{box-sizing:border-box; width:350px; background:url('http://ekladata.com/qYyhlKzoy9z7Y18Gg7YKwDB25So.jpg'); background-size:800px 600px; background-position:-450px 0px; transform:translate(450px,0px) perspective(1000px) rotatey(-40deg) ; transform-origin:center right;}
#mgg3{box-sizing:border-box; width:350px; background:url('http://ekladata.com/y50qoxtP9gsY1JP1g3-V3hFJwiI.jpg'); background-size:800px 600px; background-position:0px 0px; transform:translate(0px,0px) perspective(1000px) rotatey(50deg) ; transform-origin:center left;}
#mgd3{box-sizing:border-box; width:350px; background:url('http://ekladata.com/y50qoxtP9gsY1JP1g3-V3hFJwiI.jpg'); background-size:800px 600px; background-position:-450px 0px; transform:translate(450px,0px) perspective(1000px) rotatey(-50deg) ; transform-origin:center right;}
#mgg4{box-sizing:border-box; width:350px; background:url('http://ekladata.com/K88Dk1ItmYJzyjwzzMWoFcX_TEA.jpg'); background-size:800px 600px; background-position:0px 0px; transform:translate(0px,0px) perspective(1000px) rotatey(60deg) ; transform-origin:center left;}
#mgd4{box-sizing:border-box; width:350px; background:url('http://ekladata.com/K88Dk1ItmYJzyjwzzMWoFcX_TEA.jpg'); background-size:800px 600px; background-position:-450px 0px; transform:translate(450px,0px) perspective(1000px) rotatey(-60deg) ; transform-origin:center right;}
#mgg5{box-sizing:border-box; width:350px; background:url('http://ekladata.com/_VfqrubjGl5I4IsqOCqb-yv9ix8.jpg'); background-size:800px 600px; background-position:0px 0px; transform:translate(0px,0px) perspective(1000px) rotatey(70deg) ; transform-origin:center left;}
#mgd5{box-sizing:border-box; width:350px; background:url('http://ekladata.com/_VfqrubjGl5I4IsqOCqb-yv9ix8.jpg'); background-size:800px 600px; background-position:-450px 0px; transform:translate(450px,0px) perspective(1000px) rotatey(-70deg); transform-origin:center right;}
#sv1:hover ~ #mgg1,#sv2:hover ~ #mgg2,#sv3:hover ~ #mgg3,#sv4:hover ~ #mgg4,#sv5:hover ~ #mgg5{z-index:5; width:400px;border-right:none; background-position:0px 0px; transform:translate(0px,0px) perspective(5000px) rotatey(0deg);}
#sv1:hover ~ #mgd1,#sv2:hover ~ #mgd2,#sv3:hover ~ #mgd3,#sv4:hover ~ #mgd4,#sv5:hover ~ #mgd5{z-index:5; width:400px;border-left:none; background-position:-400px 0px; transform:translate(400px,0px) perspective(5000px) rotatey(0deg);}
--></style>