J'ai revu mon code des ronds pour le simplifier !
<div style="width:1200px; height:675px; margin:50px 0 0 -20px; border:1px solid black;">
<p id="com">Survol de chaque losange opaque.</p>
<p id="gb1a" class="gb1"> </p>
<p id="gb1b" class="gb1"> </p>
<p id="gb1c" class="gb1"> </p>
<p id="gb2a" class="gb2"> </p>
<p id="gb2b" class="gb2"> </p>
<p id="gb2c" class="gb2"> </p>
<p id="gb3a" class="gb3"> </p>
<p id="gb3b" class="gb3"> </p>
<p id="gb3c" class="gb3"> </p>
<p id="gb4a" class="gb4"> </p>
<p id="gb4b" class="gb4"> </p>
<p id="gb4c" class="gb4"> </p>
<p id="gb5a" class="gb5"> </p>
<p id="gb5b" class="gb5"> </p>
<p id="gb5c" class="gb5"> </p>
<p id="gb6a" class="gb6"> </p>
<p id="gb6b" class="gb6"> </p>
<p id="gb6c" class="gb6"> </p>
</div>
<style><!--
#com{position:absolute; z-index:1; width:1200px; text-align:center; font-size:25px; transform:translate(0px,0px);}
.gb1{position:absolute; z-index:1; width:120px; height:120px; border:4px ridge white; margin-top:0px; background:url('https://image.eklablog.com/q9oYPyuVRyrNiNIS7JwJVaOdXcw=/filters:no_upscale()/http%3A%2F%2Fekladata.com%2Fz1wdD3sDfeDx0xe43HQHsW5Wwgw.jpg'); background-size:1200px 675px; transition:all 1s;}
#gb1a{ background-position:-430px -100px; transform:translate(430px,100px) rotate(45deg);}
#gb1b{ background-position:-70px -100px; transform:translate(70px,100px) rotate(45deg); opacity:0.3;}
#gb1c{ background-position:-970px -100px; transform:translate(970px,100px) rotate(45deg); opacity:0.3;}
.gb2{position:absolute; z-index:1; width:120px; height:120px; border:4px ridge white; margin-top:0px; background:url('https://image.eklablog.com/u93zaoK1HDrZvcVuexLu7l6qX7M=/filters:no_upscale()/http%3A%2F%2Fekladata.com%2FMQt6sJ6mMiP6urj0urUp7GgYYo8.jpg'); background-size:1200px 675px; transition:all 1s;}
#gb2a{ background-position:-610px -100px; transform:translate(610px,100px) rotate(45deg);}
#gb2b{ background-position:-250px -100px; transform:translate(250px,100px) rotate(45deg); opacity:0.3;}
#gb2c{ background-position:-790px -100px; transform:translate(790px,100px) rotate(45deg); opacity:0.3;}
.gb3{position:absolute; z-index:1; width:120px; height:120px; border:4px ridge white; margin-top:0px; background:url('https://image.eklablog.com/Zh0FT2mHWGgemJNDfi8xiGZvCZ4=/filters:no_upscale()/http%3A%2F%2Fekladata.com%2F24fNhJAmtU9MHIPBa7TguUeGzvY.jpg'); background-size:1200px 675px; transition:all 1s;}
#gb3a{ background-position:-430px -280px; transform:translate(430px,280px) rotate(45deg);}
#gb3b{ background-position:-70px -280px; transform:translate(70px,280px) rotate(45deg); opacity:0.3;}
#gb3c{ background-position:-970px -280px; transform:translate(970px,280px) rotate(45deg); opacity:0.3;}
.gb4{position:absolute; z-index:1; width:120px; height:120px; border:4px ridge white; margin-top:0px; background:url('https://image.eklablog.com/gnZrZxmFaMu8Yx-WQP-7JSQHdAs=/filters:no_upscale()/http%3A%2F%2Fekladata.com%2FTrTndTkMMz2a8YL6_z9Y2gUBpCk.jpg'); background-size:1200px 675px; transition:all 1s;}
#gb4a{ background-position:-610px -280px; transform:translate(610px,280px) rotate(45deg);}
#gb4b{ background-position:-250px -280px; transform:translate(250px,280px) rotate(45deg); opacity:0.3;}
#gb4c{ background-position:-790px -280px; transform:translate(790px,280px) rotate(45deg); opacity:0.3;}
.gb5{position:absolute; z-index:1; width:120px; height:120px; border:4px ridge white; margin-top:0px; background:url('https://image.eklablog.com/OY78ntUal5scZ2FenEXn_pq_Ufc=/filters:no_upscale()/http%3A%2F%2Fekladata.com%2FNZz0h4Cc5ybVUs-JIBwewntAuW0.jpg'); background-size:1200px 675px; transition:all 1s;}
#gb5a{ background-position:-430px -460px; transform:translate(430px,460px) rotate(45deg);}
#gb5b{ background-position:-70px -460px; transform:translate(70px,460px) rotate(45deg); opacity:0.3;}
#gb5c{ background-position:-970px -460px; transform:translate(970px,460px) rotate(45deg); opacity:0.3;}
.gb6{position:absolute; z-index:1; width:120px; height:120px; border:4px ridge white; margin-top:0px; background:url('https://image.eklablog.com/eCId5fGA9ER1Re3zi0KhHuK4qr0=/filters:no_upscale()/http%3A%2F%2Fekladata.com%2FZrKRoITyAttTp_nyaH4WC8VQ2sk.jpg'); background-size:1200px 675px; transition:all 1s;}
#gb6a{ background-position:-610px -460px; transform:translate(610px,460px) rotate(45deg);}
#gb6b{ background-position:-250px -460px; transform:translate(250px,460px) rotate(45deg); opacity:0.3;}
#gb6c{ background-position:-790px -460px; transform:translate(790px,460px) rotate(45deg); opacity:0.3;}
#gb1a:hover,#gb2a:hover,#gb3a:hover,#gb4a:hover,#gb5a:hover,#gb6a:hover{z-index:5; width:400px; height:675px; border:none; background-position:-400px 0px; transform:translate(400px,0px) rotate(0deg);}
#gb1a:hover~#gb1b,#gb2a:hover~#gb2b,#gb3a:hover~#gb3b,#gb4a:hover~#gb4b,#gb5a:hover~#gb5b,#gb6a:hover~#gb6b{z-index:5; width:400px; height:675px; border:none; background-position:0px 0px; transform:translate(0px,0px) rotate(0deg); opacity:1;}
#gb1a:hover~#gb1c,#gb2a:hover~#gb2c,#gb3a:hover~#gb3c,#gb4a:hover~#gb4c,#gb5a:hover~#gb5c,#gb6a:hover~#gb6c{z-index:5; width:400px; height:675px; border:none; background-position:-800px 0px; transform:translate(800px,0px) rotate(0deg); opacity:1;}
--></style>
Survol de chaque losange opaque.