• Automne 6

    Il m'a semblé, d'après mes dernières propositions, que des montages avec des vignettes à agrandir convenaient à certain(e)s.

    Les codes CSS permettent bien des choses: reste à les imaginer !

    Ce montage est en 60% de votre largeur écran; la taille de vos images est indifférente mais, par souci de légèreté du montage, les miennes sont en 1152x648px.

     

     

     

     

     

     

    Survol

    <div style="width: 60vw; height: 33.75vw; margin: 2vh auto; border: 0.4vh ridge white; background: radial-gradient(ellipse at center, #d4e4ef 0%,#86aecc 100%);">
    <p id="ab1" class="ab">&nbsp;</p>
    <p id="ab2" class="ab">&nbsp;</p>
    <p id="ab3" class="ab">&nbsp;</p>
    <p id="ab4" class="ab">&nbsp;</p>
    <p id="ab5" class="ab">&nbsp;</p>
    <p id="ab6" class="ab">&nbsp;</p>
    <p id="cc">Survol</p>
    </div>

    <style><!--
    #cc{position:absolute; z-index:1; width:15vw; text-align:center; font-size:2.5vw; color:white; text-shadow:0.2vh 0.2vh black; transform:translate(45vw,2vw);}
    .ab{position:absolute; z-index:1; width:12vw; height:12vw; border:0.4vh solid white; box-shadow:0.3vh 0.3vh 0.5vh black; border-radius:50%;transition:all 1s linear;}
    #ab1{transform:translate(5vw,2vw) rotatey(-45deg) perspective(30vw); background:url('http://ekladata.com/C4wJFt-SfFhYVXGhmBL7a2ZoRBY.jpg'); background-size:cover; transform-origin:top left;}
    #ab2{transform:translate(20vw,2vw) rotatey(-45deg) perspective(30vw); background:url('http://ekladata.com/B1MdbhLOTmNbk5IWcr_UnnchQ_g.jpg'); background-size:cover; transform-origin:top center;}
    #ab3{transform:translate(35vw,2vw) rotatey(-45deg) perspective(30vw); background:url('http://ekladata.com/nLT_9kfw8eSvcWe783VymiPsW5k.jpg'); background-size:cover; transform-origin:top right;}
    #ab4{transform:translate(12vw,19vw) rotatey(-45deg) perspective(30vw); background:url('http://ekladata.com/va1jDHU1fn4S6USE8bP4ipTjbwI.jpg'); background-size:cover; transform-origin:bottom left;}
    #ab5{transform:translate(27vw,19vw) rotatey(-45deg) perspective(30vw); background:url('http://ekladata.com/KZy7S8iyQTXLWQUCp3BYtZbJkoM.jpg'); background-size:cover; transform-origin:bottom center;}
    #ab6{transform:translate(42vw,19vw) rotatey(-45deg) perspective(30vw); background:url('http://ekladata.com/WsQ2rDHLXC_wNpTcz8qmlmVy6cU.jpg'); background-size:cover; transform-origin:bottom right;}
    #ab1:hover,#ab2:hover,#ab3:hover,#ab4:hover,#ab5:hover,#ab6:hover{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw) rotate(0deg); border:none; box-shadow:none; border-radius:0%;}
    --></style>