Tags mur.

Reprise d'un code publié en unités adaptatives, modifié ici en 1150x647px, dimensions utilisées par une fidèle lectrice mais que vous pouvez modifier à vos dimensions.

Survolez chaque tag.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<div style="width: 1150px; height: 648px; margin: 10px auto; border: 4px ridge black; background: url('http://ekladata.com/yff4CSTc5wdjK4Stn1wd4o9yxFo.jpg'); background-size: contain;">
<p id="comm">Survolez chaque tag.</p>


<p id="tg1a">&nbsp;</p>
<img id="tg1b" src="http://ekladata.com/T0XXFTo3MPyLB_GhyncEYb_Hxzw.gif" alt="" />
<p id="tg1c" class="cq1">&nbsp;</p>
<p id="tg1d" class="cq1">&nbsp;</p>
<p id="tg1e" class="cq1">&nbsp;</p>
<p id="tg1f" class="cq1">&nbsp;</p>

<p id="tg2a">&nbsp;</p>
<img id="tg2b" src="http://ekladata.com/GLEVaFMX4qyxQgqa8S-wGuLeU_k.gif" alt="" />
<p id="tg2c" class="cq2">&nbsp;</p>
<p id="tg2d" class="cq2">&nbsp;</p>
<p id="tg2e" class="cq2">&nbsp;</p>
<p id="tg2f" class="cq2">&nbsp;</p>

<p id="tg3a">&nbsp;</p>
<img id="tg3b" src="http://ekladata.com/_OHqkyfTYw1VwIEn8-MDmuLDwJk.gif" alt="" />
<p id="tg3c" class="cq3">&nbsp;</p>
<p id="tg3d" class="cq3">&nbsp;</p>
<p id="tg3e" class="cq3">&nbsp;</p>
<p id="tg3f" class="cq3">&nbsp;</p>

<p id="tg4a">&nbsp;</p>
<img id="tg4b" src="http://ekladata.com/jZL_K910GlTI-AHBx6o_FBn-Clw.gif" alt="" />
<p id="tg4c" class="cq4">&nbsp;</p>
<p id="tg4d" class="cq4">&nbsp;</p>
<p id="tg4e" class="cq4">&nbsp;</p>
<p id="tg4f" class="cq4">&nbsp;</p>
</div>

<style><!--
@import url('https://fonts.googleapis.com/css?family=Nosifer');
#comm{position:absolute; z-index:1; width:600px; transform:translate(300px,10px);font-family: 'Nosifer', cursive; font-size:35px;}

#tg1a{position:absolute; z-index:10; width:200px; height:280px; transform:translate(100px,100px) rotate(-25deg);}
#tg1b{position:absolute; z-index:1; width:200px; transform:translate(100px,100px) rotate(-25deg); opacity:0.7;}
.cq1{ background:url('http://ekladata.com/LqNRXL7vfPwOElGVEr-BmVR1AAc.jpg');background-size:1150px 648px; }
#tg1c{position:absolute; z-index:5; transform:translate(200px,240px); width:0px; height:0px; background-position:0px 0px; transition:all 1s linear 0s;}
#tg1d{position:absolute; z-index:5; transform:translate(200px,240px); width:0px; height:0px; background-position:575px 0px; transition:all 1s linear 0.2s;}
#tg1e{position:absolute; z-index:5; transform:translate(200px,240px); width:0px; height:0px; background-position:0px 324px; transition:all 1s linear 0.4s;}
#tg1f{position:absolute; z-index:5; transform:translate(200px,240px); width:0px; height:0px; background-position:575px 324px; transition:all 1s linear 0.6s;}

#tg2a{position:absolute; z-index:10; width:300px; height:280px; transform:translate(500px,100px) rotate(0deg);}
#tg2b{position:absolute; z-index:1; width:300px; transform:translate(500px,100px) rotate(0deg);opacity:0.7;}
.cq2{ background:url('http://ekladata.com/EGpK1TXogXVtbBmO_SuSNM9DNNk.jpg');background-size:1150px 648px; }
#tg2c{position:absolute; z-index:5; transform:translate(600px,240px); width:0px; height:0px; background-position:0px 0px; transition:all 1s linear 0s ;}
#tg2d{position:absolute; z-index:5; transform:translate(600px,240px); width:0px; height:0px; background-position:575px 0px; transition:all 1s linear 0.2s;}
#tg2e{position:absolute; z-index:5; transform:translate(600px,240px); width:0px; height:0px; background-position:0px 324px; transition:all 1s linear 0.4s;}
#tg2f{position:absolute; z-index:5; transform:translate(600px,240px); width:0px; height:0px; background-position:575px 324px; transition:all 1s linear 0.6s;}

#tg3a{position:absolute; z-index:10; width:300px; height:200px; transform:translate(150px,400px) rotate(0deg);}
#tg3b{position:absolute; z-index:1; width:300px; transform:translate(150px,400px) rotate(0deg);opacity:0.7;}
.cq3{ background:url('http://ekladata.com/1cdbZRpzeXyLGupgaa-wkFIVcn4.jpg');background-size:1150px 648px; }
#tg3c{position:absolute; z-index:5; transform:translate(300px,450px) rotate(40deg); width:0px; height:0px; background-position:0px 0px; transition:all 1s linear 0s;}
#tg3d{position:absolute; z-index:5; transform:translate(300px,450px) rotate(40deg); width:0px; height:0px; background-position:575px 0px; transition:all 1s linear 0.2s;}
#tg3e{position:absolute; z-index:5; transform:translate(300px,450px) rotate(40deg); width:0px; height:0px; background-position:0px 324px; transition:all 1s linear 0.4s;}
#tg3f{position:absolute; z-index:5; transform:translate(300px,450px) rotate(40deg); width:0px; height:0px; background-position:575px 324px; transition:all 1s linear 0.6s;}
#tg4a{position:absolute; z-index:10; width:300px; height:350px; transform:translate(800px,300px) rotate(0deg);}

#tg4b{position:absolute; z-index:1; width:300px; transform:translate(800px,300px) rotate(0deg);opacity:0.7;}
.cq4{ background:url('http://ekladata.com/kpQbLOMarE7S5Dhz6kNIMW3nh8A.jpg');background-size:1150px 648px; }
#tg4c{position:absolute; z-index:5; transform:translate(950px,450px) rotate(-40deg); width:0px; height:0px; background-position:0px 0px; transition:all 1s linear 0s;}
#tg4d{position:absolute; z-index:5; transform:translate(950px,450px) rotate(-40deg); width:0px; height:0px; background-position:575px 0px; transition:all 1s linear 0.2s;}
#tg4e{position:absolute; z-index:5; transform:translate(950px,450px) rotate(-40deg); width:0px; height:0px; background-position:0px 324px; transition:all 1s linear 0.4s;}
#tg4f{position:absolute; z-index:5; transform:translate(950px,450px) rotate(-40deg); width:0px; height:0px; background-position:575px 324px; transition:all 1s linear 0.6s;}

#tg1a:hover ~ #tg1c,#tg2a:hover ~ #tg2c,#tg3a:hover ~ #tg3c,#tg4a:hover ~ #tg4c{width:575px; height:324px; transform:translate(0px,0px) rotate(0deg);}
#tg1a:hover ~ #tg1d,#tg2a:hover ~ #tg2d,#tg3a:hover ~ #tg3d,#tg4a:hover ~ #tg4d{width:575px; height:324px; transform:translate(575px,0px) rotate(0deg);}
#tg1a:hover ~ #tg1e,#tg2a:hover ~ #tg2e,#tg3a:hover ~ #tg3e,#tg4a:hover ~ #tg4e{width:575px; height:324px; transform:translate(0px,324px) rotate(0deg);}
#tg1a:hover ~ #tg1f,#tg2a:hover ~ #tg2f,#tg3a:hover ~ #tg3f,#tg4a:hover ~ #tg4f{width:575px; height:324px; transform:translate(575px,324px) rotate(0deg);}
--></style>

Vos images sont à vos dimensions et vous n'avez qu'à remplacer mes adresses/images par les vôtres; quant aux tags, vous en trouverez, sur le net, en recherchant, par exemple: "silhouette noir et blanc".

Chaque image est divisée en 4 parties, réduites à 0px par 0px au départ et qui se positionnent au survol d'un tag, en 575px par 324px, pour ce montage.

Chaque image de tag est sous un bouton invisible, qui commande les 4 parties de l'image.