29.01.2025

Le titre "2 bandes" était mon idée de départ, modifiée ensuite ! 

<div style="position:relative; overflow:hidden; width:1200px; height:675px; margin:50px 0 0 -20px; border:4px ridge grey; background:url('https://image.eklablog.com/WowtgB0QKiQCVhtutjbWRP8CmOg=/filters:no_upscale()/http%3A%2F%2Fekladata.com%2FGAhL9BJAt18JRUIAGggCya0w1wc.jpg'); background-size:cover;">

<input id="exp" value="Clic ici puis survol des images.">

<img id="mgg1" class="mg" src="https://image.eklablog.com/X7fzhAcZgdO2aMCKMwkekxOHVWQ=/filters:no_upscale()/http%3A%2F%2Fekladata.com%2FvBW6svmzQPHPDgE9TclpWb5PXsI.jpg">

<img id="mgg2" class="mg" src="https://image.eklablog.com/1o60gThFjCp5pcbkcK0FwT4iqjY=/filters:no_upscale()/http%3A%2F%2Fekladata.com%2Fhsyj9xcLDespev286kXHWSXio0o.jpg">

<img id="mgg3" class="mg" src="https://image.eklablog.com/o1femcxzexReOehgCGcK4W27scc=/filters:no_upscale()/http%3A%2F%2Fekladata.com%2Fvll2-H3MOt1GsoAanOeACz89jl4.jpg">

<img id="mgg4" class="mg" src="https://image.eklablog.com/LwRSg_kpNY70V9w1cY1TXaB68mA=/filters:no_upscale()/http%3A%2F%2Fekladata.com%2FFD0gSWTRPrVXi94fuPJRunMppDk.jpg">

<img id="mgg5" class="mg" src="https://image.eklablog.com/nrpaWzByKldcAJjC0666NGbYh3k=/filters:no_upscale()/http%3A%2F%2Fekladata.com%2FQKJ2UGZHixlu4aRp_lQc0ONiKSU.jpg">

<img id="mgg6" class="mg" src="https://image.eklablog.com/z7RnARAy-sJ3wtkRLvU9y2Ke6YE=/filters:no_upscale()/http%3A%2F%2Fekladata.com%2FMFdWKclfIty7cYIlrlFcL3wN8YQ.jpg">

</div>

<style><!--

#exp{position:absolute; z-index:1; width:600px; background:rgba(255,255,255,0.5); text-align:center; font-size:30px;transform:translate(300px,10px);}

.mg{position:absolute; z-index:2; width:1200px; height:675px; transition:1s all;}

#mgg1{box-sizing:border-box; border:8px ridge white; transform:translate(-1000px,-400px) rotate(45deg); margin-left:-300px;}

#mgg2{box-sizing:border-box; border:8px ridge white; transform:translate(-1000px,-200px) rotate(45deg); margin-left:-300px;}

#mgg3{box-sizing:border-box; border:8px ridge white; transform:translate(-1000px,0px) rotate(45deg); margin-left:-300px;}

#mgg4{box-sizing:border-box; border:8px ridge white; transform:translate(1000px,-400px) rotate(-45deg); margin-left:300px;}

#mgg5{box-sizing:border-box; border:8px ridge white; transform:translate(1000px,-200px) rotate(-45deg); margin-left:300px;}

#mgg6{box-sizing:border-box; border:8px ridge white; transform:translate(1000px,0px) rotate(-45deg); margin-left:300px;}

#exp:focus~#mgg1,#exp:focus~#mgg2,#exp:focus~#mgg3{margin-left:0px;}

#exp:focus~#mgg4,#exp:focus~#mgg5,#exp:focus~#mgg6{margin-left:0px;}  

#mgg1:hover,#mgg2:hover,#mgg3:hover{z-index:10; transform:translate(0px,0px) rotate(0deg); margin-left:0px;}

#mgg4:hover,#mgg5:hover,#mgg6:hover{z-index:10; transform:translate(0px,0px) rotate(0deg); margin-left:0px;}  

--></style>