Art.09.8.21

Je reviens sur un modèle que j'ai proposé sur lequel on peut ajouter une animation très facilement.

La bordure et l'espace intérieur (padding) de chaque case sont compris dans sa dimension par box-sizing:border-box;

La case "tb5" étant au milieu des autres, afin de ne pas survoler une autre case pour l'atteindre, on peut animer une case d'à-côté par un clic maintenu, case 6 par exemple.

Survol des cases et clic maintenu sur case 6; exemple avec 9 images mais vous mettez ce que vous voulez dans chaque case ... On essaye ?

**************
<div style="width: 960px; height: 540px; margin: 20px auto; text-align: left;">
<p id="tb1" class="tb">case 1</p>
<p id="tb2" class="tb">case 2</p>
<p id="tb3" class="tb">case 3</p>
<p id="tb4" class="tb">case 4</p>
<p id="tb5" class="tb">case 5</p>
<p id="tb6" class="tb">case 6</p>
<p id="tb7" class="tb">case 7</p>
<p id="tb8" class="tb">case 8</p>
<p id="tb9" class="tb">case 9</p>
</div>

<style><!--
.tb{position:absolute; z-index:1; width:320px; height:180px; border:4px solid white; padding:5px; text-align:center; line-height:normal; font-size:25px; color:white; text-shadow:2px 2px black; transition:all 1s;}
#tb1{box-sizing:border-box; transform:translate(0px,0px); background:url('http://ekladata.com/cazoaTfh3-8XN7-0NH4Skv67sNA@1000x540.jpg'); background-size:cover;}
#tb2{box-sizing:border-box; transform:translate(320px,0px); background:url('http://ekladata.com/lT1PCNDFm355lbYzP0YFKgDlvdQ@1000x540.jpg'); background-size:cover;}
#tb3{box-sizing:border-box; transform:translate(640px,0px); background:url('http://ekladata.com/iYiitwUmSvKjwTFLF5Wa_UrkDIU@1000x540.jpg'); background-size:cover;}
#tb4{box-sizing:border-box; transform:translate(0px,180px); background:url('http://ekladata.com/nrqotJo0u_EEssbLZOTTNa2kFR8@1000x540.jpg'); background-size:cover;}
#tb5{box-sizing:border-box; transform:translate(320px,180px); background:url('http://ekladata.com/4zzIeOk42ZwvDD2LFSo5rURpUac@1000x540.jpg'); background-size:cover;}
#tb6{box-sizing:border-box; transform:translate(640px,180px); background:url('http://ekladata.com/8uU0U80FWThmNqABzjBxZ_ioMag@1000x540.jpg'); background-size:cover;}
#tb7{box-sizing:border-box; transform:translate(0px,360px); background:url('http://ekladata.com/-JCpUer42un5yeEZG4EaXyrcIDk@1000x540.jpg'); background-size:cover;}
#tb8{box-sizing:border-box; transform:translate(320px,360px); background:url('http://ekladata.com/XNIHwXTaQxPfNl6vzXX6aQD1LsI@1000x540.jpg'); background-size:cover;}
#tb9{box-sizing:border-box; transform:translate(640px,360px); background:url('http://ekladata.com/sGSVsOtGIeu0PmUj8XDbl4GCCdQ@1000x540.jpg'); background-size:cover;}
#tb1:hover,#tb2:hover,#tb3:hover,#tb4:hover,#tb5:hover,#tb6:active,#tb7:hover,#tb8:hover,#tb9:hover{z-index:5; width:960px; height:540px; transform:translate(0px,0px);}
--></style>