• Construction 8

    Je reprends le principe d'un montage publié, sur lequel j'avais beaucoup bricolé pour le positionnement des éléments, et que je n'avais pas proposé, de ce fait.

    Les difficultés viennent, d'une part, de la rotation à 45 degrés , des éléments du dessous et de la différence entre ce que nous voyons en préparation d'article et ce que nous voyons en publication et, pour ce dernier point, pas de calcul possible !

    Une rotation se fait par rapport au centre de l'élément: voilà pour ce point et pour le positionnement.

     

     

     

     

     


    <div style="width: 60vw; height: 69vh; margin: 2vh auto; border: 0.6vh ridge white;">
    <p id="ph1">&nbsp;</p>
    <p id="ph2">&nbsp;</p>
    <p id="ph3">&nbsp;</p>
    <p id="ph4">&nbsp;</p>
    <p id="ph5">&nbsp;</p>
    </div>
    <style><!--
    #ph1{position:absolute; z-index:1; width:10vw; height:10vw; border:0.3vh solid black; background:yellow; transform:translate(25vw,10vh) rotate(45deg);}
    #ph2{position:absolute; z-index:1; width:10vw; height:10vw; border:0.3vh solid black; background:coral; transform:translate(17.8vw,24.8vh) rotate(45deg);}
    #ph3{position:absolute; z-index:1; width:10vw; height:10vw; border:0.3vh solid black; background:lime; transform:translate(32.2vw,24.8vh) rotate(45deg);}
    #ph4{position:absolute; z-index:1; width:10vw; height:10vw; border:0.3vh solid black; background:pink; transform:translate(25vw,39.5vh) rotate(45deg);}
    #ph5{position:absolute; z-index:1; width:14vw; height:14vw; border:0.3vh solid black;background:rgba(0,0,0,0.5); transform:translate(23vw,20.7vh); transition:all 1s linear;}
    --></style>


    Les positionnements étant définis, pour cette dimension de montage,il ne reste plus qu'à remplacer les couleurs de fond des éléments par des images et de les animer au survol.

    Il me semble que cette première phase soit nécessaire si vous voulez modifier  la taille du montage ou des images.

    Ajoutons un dégradé de fond et plaçons nos adresses-images à la place des couleurs; mes photos font 1920x1080px (16/9); si le rapport de vos photos est le même, vous n'avez qu'à placer vos adresses-images à la place des miennes: elles ne seront pas déformées.

     

     

     

     

     

    Survolez chaque partie visible des éléments.


    <div style="width: 60vw; height: 69vh; margin: 2vh auto; border: 0.6vh ridge white; background:linear-gradient(to bottom, rgba(50,0,0,0.5) 0%, rgba(0,50,0,0.5) 50%, rgba(0,0,50,0.5) 100%);">
    <p id="ph1a">&nbsp;</p>
    <p id="ph2a">&nbsp;</p>
    <p id="ph3a">&nbsp;</p>
    <p id="ph4a">&nbsp;</p>
    <p id="ph5a">&nbsp;</p>
    <p id="ph6a">Survolez chaque partie visible des éléments.</p>
    </div>
    <style><!--
    #ph1a{position:absolute; z-index:1; width:10vw; height:10vw; border:0.3vh solid black; background:url('http://ekladata.com/dd-bHTOEArfTBQfyVNkybkWEnq8.jpg'); background-size:cover; transform:translate(25vw,10vh) rotate(45deg); transition:all 1s linear;}
    #ph2a{position:absolute; z-index:1; width:10vw; height:10vw; border:0.3vh solid black; background:url('http://ekladata.com/sU5Vqj7a_Dw-rihm5ZDbSW4C3jk.jpg'); background-size:cover; transform:translate(17.8vw,24.8vh) rotate(45deg); transition:all 1s linear;}
    #ph3a{position:absolute; z-index:1; width:10vw; height:10vw; border:0.3vh solid black; background:url('http://ekladata.com/qmQuMrxkYHHzRfMrbuLchmSJIWY.jpg'); background-size:cover; transform:translate(32.2vw,24.8vh) rotate(45deg); transition:all 1s linear;}
    #ph4a{position:absolute; z-index:1; width:10vw; height:10vw; border:0.3vh solid black; background:url('http://ekladata.com/jafeH4dqOIJqmuqAo3XvcZHz97w.jpg'); background-size:cover; transform:translate(25vw,39.5vh) rotate(45deg); transition:all 1s linear;}
    #ph5a{position:absolute; z-index:1; width:14vw; height:14vw; border:0.3vh solid black;background:url('http://ekladata.com/bBKOmCc-NmI7XR38wd5KQPLuaMQ.jpg'); background-size:cover; transform:translate(23vw,20.7vh); transition:all 1s linear;}
    #ph6a{position:absolute; z-index:1; width:18vw; transform:translate(2vw,2vh);text-align:center; font-size:3vh; color:white; text-shadow:0.2vh 0.2vh black;}
    #ph1a:hover, #ph2a:hover,#ph3a:hover,#ph4a:hover,#ph5a:hover{z-index:10; width:60vw; height:69vh; transform:translate(0vw,0vh);}
    --></style>