Montage 45

Sur une idée de carré aux angles arrondis, du net, en ajoutant le changement de couleurs qui plaît.

<div style="width: 60vw; height: 33.75vw; border: 0.4vh ridge #0B3B2E; background: url('https://ekladata.com/FSy4tDAzom-Ix22uALO9392uS1U/img692.jpg'); margin: 1vh auto;">
<p id="cc">Clic maintenu sur chaque vignette.</p>
<p id="car0">&nbsp;</p>
<p id="car1" class="car">&nbsp;</p>
<p id="car2" class="car">&nbsp;</p>
<p id="car3" class="car">&nbsp;</p>
<p id="car4" class="car">&nbsp;</p>
<p id="car5" class="car">&nbsp;</p>
<p id="car6" class="car">&nbsp;</p>
<p id="car7" class="car">&nbsp;</p>
<p id="car8" class="car">&nbsp;</p>
<p id="car9" class="car">&nbsp;</p>
</div>

<style><!--
#cc{position:absolute; z-index:1; width:10vw; height:10vw; text-align:center; font-size:1.5vw; color:white; text-shadow:0.2vh 0.2vh #0B3B2E; transform:translate(2vw,5vw);}
#car0{position:absolute; z-index:1; width:30vw; height:30vw; border-radius:3vw; transform:translate(15vw,1.5vw); box-shadow:0.4vw 0.4vw 0.5vw black;}
.car{position:absolute; z-index:2; width:10vw; height:10vw; border:0.5vh solid #0A2A0A; filter:hue-rotate(300deg); -webkit-filter:hue-rotate(300deg); transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s, background 1s linear 0s, filter 5s linear 1s;}
#car1{box-sizing:border-box; border-radius:3vw 0 0 0; transform:translate(15vw,1.5vw); background:url('https://ekladata.com/hL_KDBSibKXCvU9ucEW4at05AN0.jpg'); background-size:60vw 33.75vw; background-position:-15vw -1.5vw;}
#car2{box-sizing:border-box; transform:translate(25vw,1.5vw); background:url('https://ekladata.com/nPAxAQZrWM3NMpDAmMlKiW0k5VU.jpg'); background-size:60vw 33.75vw; background-position:-25vw -1.5vw;}
#car3{box-sizing:border-box; border-radius:0 3vw 0 0; transform:translate(35vw,1.5vw); background:url('https://ekladata.com/ZtzIMZdSEQeZt7PGOHzbGfLpCTs.jpg'); background-size:60vw 33.75vw; background-position:-35vw -1.5vw;}
#car4{box-sizing:border-box; transform:translate(15vw,11.5vw); background:url('https://ekladata.com/PYp67cxAdZqtDpWaWNeL6FyRcZw.jpg'); background-size:60vw 33.75vw; background-position:-15vw -11.5vw;}
#car5{box-sizing:border-box; transform:translate(25vw,11.5vw); background:url('https://ekladata.com/bx9YF_vWkO6TI3gP4vzVY_anDqM.jpg'); background-size:60vw 33.75vw; background-position:-25vw -11.5vw;}
#car6{box-sizing:border-box; transform:translate(35vw,11.5vw); background:url('https://ekladata.com/9h_rMpe0CZZjyub5CxbBcIfNLr0.jpg'); background-size:60vw 33.75vw; background-position:-35vw -11.5vw;}
#car7{box-sizing:border-box; border-radius:0 0 0 3vw; transform:translate(15vw,21.5vw); background:url('https://ekladata.com/hNa-ud51DKJJ6oBUrQ4LaFZmx10.jpg'); background-size:60vw 33.75vw; background-position:-15vw -21.5vw;}
#car8{box-sizing:border-box; transform:translate(25vw,21.5vw); background:url('https://ekladata.com/rKh711IrBRYYB8CjbgyjEr-nrZw.jpg'); background-size:60vw 33.75vw; background-position:-25vw -21.5vw;}
#car9{box-sizing:border-box; border-radius:0 0 3vw 0; transform:translate(35vw,21.5vw); background:url('https://ekladata.com/q2cRS-nH5xyEvdKmPcS2S-tz9hQ.jpg'); background-size:60vw 33.75vw; background-position:-35vw -21.5vw;}
#car1:active,#car2:active,#car3:active,#car4:active,#car5:active,#car6:active,#car7:active,#car8:active,#car9:active{z-index:10; width:60vw; height:33.75vw; transform:translate(0vw,0vw); border-radius:0vw; background-position:0vw 0vw; filter:hue-rotate(0deg); -webkit-filter:hue-rotate(0deg);}
--></style>