Domino

Survolez les ronds de ce domino double six.

Le code est celui de principe avec une couleur unie en fond des ronds; pour y mettre votre adresse d'image, remplacez: background:green; par background:url('http...jpg'); background-size:60vw 33.75vw; background-position:50% 50%;

On peut mettre une image en filigrane, en fond de domino; si ce code n'est pas assez explicite pour vous, je le referais avec des images mais, aujourd'hui, j'ai la flemme !

<div style="position: relative; width: 60vw; height: 33.75vw; border-radius: 2vw; margin: 2vh auto; border: 0.3vh solid grey; background: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.3) 100%); overflow: hidden;">
<p id="mg1a" class="mg2">&nbsp;</p>
<p id="mg1" class="mg">&nbsp;</p>
<p id="mg2a" class="mg2">&nbsp;</p>
<p id="mg2" class="mg">&nbsp;</p>
<p id="mg3a" class="mg2">&nbsp;</p>
<p id="mg3" class="mg">&nbsp;</p>
<p id="mg4a" class="mg2">&nbsp;</p>
<p id="mg4" class="mg1">&nbsp;</p>
<p id="mg5a" class="mg2">&nbsp;</p>
<p id="mg5" class="mg1">&nbsp;</p>
<p id="mg6a" class="mg2">&nbsp;</p>
<p id="mg6" class="mg1">&nbsp;</p>
</div>
<style><!--
.mg{position:absolute; z-index:1; width:8vw; height:8vw; border-radius:50%; border:0.2vh solid white; box-shadow:0.3vh 0.3vh 0.5vh black; transition:border 1s linear 0s, width 1s linear 0s, height 1s linear 1s, transform 1s linear 0s;}
.mg1{position:absolute; z-index:1; width:8vw; height:8vw; border-radius:50%; border:0.2vh solid white;box-shadow:0.3vh 0.3vh 0.5vh black; transition:border 1s linear 0s, width 1s linear 0s, height 1s linear 1s, transform 1s linear 0s;}
.mg2{position:absolute; z-index:10; width:8vw; height:8vw; border-radius:50%;}

#mg1a{transform:translate(10vw,6vw);}
#mg1{transform:translate(10vw,6vw); background:green;}
#mg2a{transform:translate(27vw,6vw);}
#mg2{transform:translate(27vw,6vw); background:yellow;}
#mg3a{transform:translate(44vw,6vw); }
#mg3{transform:translate(44vw,6vw); background:coral;}
#mg4a{transform:translate(10vw,20vw);}
#mg4{transform:translate(10vw,20vw); background:lime;}
#mg5a{transform:translate(27vw,20vw);}
#mg5{transform:translate(27vw,20vw); background:lightblue;}
#mg6a{transform:translate(44vw,20vw);}
#mg6{transform:translate(44vw,20vw); background:purple;}

#mg1a:hover ~ #mg1, #mg2a:hover ~ #mg2,#mg3a:hover ~ #mg3,#mg4a:hover ~ #mg4, #mg5a:hover ~ #mg5,#mg6a:hover ~ #mg6{z-index:5; border-radius:0%; width:60vw; height:33.75vw; transform:translate(0vw,0vw); border:none; box-shadow:none;}
--></style>