Division 4

A partir des éléments proposés précédemment, nous pouvons construire différents montages, type diaporama au survol des boutons.

Chaque bouton ouvre les volets et change l'image de fond.

<div style="position: relative; width: 80vw; height: 45vw; margin: 0.1vw auto; border: 0.4vw ridge white; overflow: hidden;">
<p id="ouv1" class="ouv">&nbsp;</p>
<p id="ouv2" class="ouv">&nbsp;</p>
<p id="ouv3" class="ouv">&nbsp;</p>
<p id="ouv4" class="ouv">&nbsp;</p>
<p id="pho1" class="pho">&nbsp;</p>
<p id="pho2" class="pho">&nbsp;</p>
<p id="pho3" class="pho">&nbsp;</p>
<p id="pho4" class="pho">&nbsp;</p>
<p id="pg" class="page">&nbsp;</p>
<p id="pd" class="page">&nbsp;</p>
</div>
 
<style><!--
.ouv{position:absolute; z-index:10; width:3vw; height:3vw; border:0.1vw solid black; border-radius:50%; background:linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 100%);}
#ouv1{transform:translate(75vw,2vw);}
#ouv2{transform:translate(75vw,7vw);}
#ouv3{transform:translate(75vw,12vw);}
#ouv4{transform:translate(75vw,17vw);}
.pho{position:absolute; width:80vw; height:45vw; transform:translate(0vw,0vw); transition:all 1s linear;}
#pho1{z-index:1; background:url('http://ekladata.com/g5onDUB-pyjgnT9jvO7hNcmjiR4.jpg'); background-size:80vw 45vw;}
#pho2{z-index:1; background:url('http://ekladata.com/fkde1yxEUVWu2NP_BZouFKbMFhI.jpg'); background-size:80vw 45vw;}
#pho3{z-index:1; background:url('http://ekladata.com/y38GPBSFHCjfW2m95kyPXxHdaRU.jpg'); background-size:80vw 45vw;}
#pho4{z-index:1; background:url('http://ekladata.com/AbLuAJngK-2LZfz1HICO08JWvIk.jpg'); background-size:80vw 45vw;}
.page{background:url('http://ekladata.com/8pPuuDI7-c59ViAf0yQ1rgxGsZE.jpg'); background-size:80vw 45vw;}
#pg{position:absolute; z-index:8; width:40vw; height:45vw;background-position:0vw 0vw; transform:translate(0vw,0vw) perspective(50vw) rotatey(0deg); transform-origin:center left; transition:all 1s 0.1s linear;}
#pd{position:absolute; z-index:8; width:40vw; height:45vw;background-position:40vw 0vw; transform:translate(40vw,0vw) perspective(50vw) rotatey(0deg);transform-origin:center right; transition:all 1s 0.1s linear;}
#ouv2:hover ~ #pho2,#ouv3:hover ~ #pho3,#ouv4:hover ~ #pho4{ z-index:5;}
#ouv1:hover ~ #pg,#ouv2:hover ~ #pg,#ouv3:hover ~ #pg,#ouv4:hover ~ #pg{transform:translate(0vw,0vw) perspective(50vw) rotatey(90deg) ;}
#ouv1:hover ~ #pd,#ouv2:hover ~ #pd,#ouv3:hover ~ #pd,#ouv4:hover ~ #pd{transform:translate(40vw,0vw) perspective(50vw) rotatey(-90deg);}
--></style>