Ronds

Montage en 1200px par 675px (ratio 16/9), créé sur Ekla, car c'est plus simple et dont j'ai recopié le code source (html/css) dans une page Blogger, avec les adresses d'images hébergées sus Ekla.

SURVOL

RONDS

OPAQUES

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

<div id="lan">
<p id="sv1">SURVOL</p>
<p id="sv2">RONDS</p>
<p id="sv3">OPAQUES</p>
<p id="rd1a" class="los">&nbsp;</p>
<p id="rd1b" class="los">&nbsp;</p>
<p id="rd1c" class="los">&nbsp;</p>
<p id="rd2a" class="los">&nbsp;</p>
<p id="rd2b" class="los">&nbsp;</p>
<p id="rd2c" class="los">&nbsp;</p>
<p id="rd3a" class="los">&nbsp;</p>
<p id="rd3b" class="los">&nbsp;</p>
<p id="rd3c" class="los">&nbsp;</p>
<p id="rd4a" class="los">&nbsp;</p>
<p id="rd4b" class="los">&nbsp;</p>
<p id="rd4c" class="los">&nbsp;</p>
<p id="rd5a" class="los">&nbsp;</p>
<p id="rd5b" class="los">&nbsp;</p>
<p id="rd5c" class="los">&nbsp;</p>
</div>

<style><!--
#sv1{position:absolute; width:120px; height:225px; text-align:center; font-size:22px; line-height:25px; transform:translate(180px,0px);}
#sv2{position:absolute; width:120px; height:225px; text-align:center; font-size:22px; line-height:25px; transform:translate(420px,0px);}
#sv3{position:absolute; width:120px; height:225px; text-align:center; font-size:22px; line-height:25px; transform:translate(660px,0px);}
#lan{position:relative; width:1200px; height:675px; margin:50px auto;}
.los{position:absolute; z-index:1; width:240px; height:225px; border-radius:50%; box-shadow:inset -6px -6px 8px black, inset 6px 6px 8px white; transition:all 1s;}
#rd1a{background:url('http://ekladata.com/rFZsfZh91vxjKTtaX7AVaks0uzM.jpg'); background-size:1200px 675px; background-position:0px 0px; transform:translate(0px,0px);}
#rd1b{background:url('http://ekladata.com/rFZsfZh91vxjKTtaX7AVaks0uzM.jpg'); background-size:1200px 675px; background-position:-960px -225px; transform:translate(960px,225px); opacity:0.5;}
#rd1c{background:url('http://ekladata.com/rFZsfZh91vxjKTtaX7AVaks0uzM.jpg'); background-size:1200px 675px; background-position:-480px -460px; transform:translate(480px,460px); opacity:0.5;}
#rd2a{background:url('http://ekladata.com/-kRdMapn6fnsYv4fclZBMepqNBM.jpg'); background-size:1200px 675px; background-position:-240px 0px; transform:translate(240px,0px);}
#rd2b{background:url('http://ekladata.com/-kRdMapn6fnsYv4fclZBMepqNBM.jpg'); background-size:1200px 675px; background-position:-480px -225px; transform:translate(480px,225px); opacity:0.5;}
#rd2c{background:url('http://ekladata.com/-kRdMapn6fnsYv4fclZBMepqNBM.jpg'); background-size:1200px 675px; background-position:-720px -460px; transform:translate(720px,460px); opacity:0.5;}
#rd3a{background:url('http://ekladata.com/7JrX3SidzbxxWN1I1ZCJDTRuOuY.jpg'); background-size:1200px 675px; background-position:-480px 0px; transform:translate(480px,0px);}
#rd3b{background:url('http://ekladata.com/7JrX3SidzbxxWN1I1ZCJDTRuOuY.jpg'); background-size:1200px 675px; background-position:0px -225px; transform:translate(0px,225px); opacity:0.5;}
#rd3c{background:url('http://ekladata.com/7JrX3SidzbxxWN1I1ZCJDTRuOuY.jpg'); background-size:1200px 675px; background-position:-960px -460px; transform:translate(960px,460px); opacity:0.5;}
#rd4a{background:url('http://ekladata.com/4uLuB6iIlQR4xFGleGf5-W4Enbg.jpg'); background-size:1200px 675px; background-position:-720px 0px; transform:translate(720px,0px);}
#rd4b{background:url('g'http://ekladata.com/4uLuB6iIlQR4xFGleGf5-W4Enbg.jpg); background-size:1200px 675px; background-position:-240px -225px; transform:translate(240px,225px); opacity:0.5;}

#rd4c{background:url('http://ekladata.com/4uLuB6iIlQR4xFGleGf5-W4Enbg.jpg'); background-size:1200px 675px; background-position:0px -460px; transform:translate(0px,460px); opacity:0.5;}
#rd5a{background:url('http://ekladata.com/EjHvDx3h3ezhlLuc_Fk85WguukE.jpg'); background-size:1200px 675px; background-position:-960px 0px; transform:translate(960px,0px);}
#rd5b{background:url('http://ekladata.com/EjHvDx3h3ezhlLuc_Fk85WguukE.jpg'); background-size:1200px 675px; background-position:-720px -225px; transform:translate(720px,225px); opacity:0.5;}
#rd5c{background:url('http://ekladata.com/EjHvDx3h3ezhlLuc_Fk85WguukE.jpg'); background-size:1200px 675px; background-position:-225px -460px; transform:translate(225px,460px); opacity:0.5;}

#rd1a:hover,#rd2a:hover,#rd3a:hover,#rd4a:hover,#rd5a:hover{z-index:5; width:1200px; height:225px; border-radius:0%; box-shadow:none; filter:invert(0); background-position:0px 0px; transform:translate(0px,0px);}
#rd1a:hover~#rd1b,#rd2a:hover~#rd2b,#rd3a:hover~#rd3b,#rd4a:hover~#rd4b,#rd5a:hover~#rd5b{z-index:5; width:1200px; height:225px; border-radius:0%; box-shadow:none; filter:invert(0); background-position:0px -225px; transform:translate(0px,225px); opacity:1;}
#rd1a:hover~#rd1c,#rd2a:hover~#rd2c,#rd3a:hover~#rd3c,#rd4a:hover~#rd4c,#rd5a:hover~#rd5c{z-index:5; width:1200px; height:225px; border-radius:0%; box-shadow:none; filter:invert(0); background-position:0px -450px; transform:translate(0px,450px); opacity:1;}
--></style>