• Automne 5

    Si le code vous intéresse mais dans une autre dimension, merci de me contacter.

    Survol puis clic.
    Retour clic hors montage.


    <div style="width: 80vw; height: 45vw; margin: 2vh auto; border: 0.6vh ridge white; background: linear-gradient(to bottom, #e9d4b3 0%,#c19e67 50%,#e9d4b3 100%);"><input id="sah1" class="sah" type="text" /><input id="sah2" class="sah" type="text" /><input id="sah3" class="sah" type="text" /><input id="sah4" class="sah" type="text" /><input id="sah5" class="sah" type="text" /><input id="sah6" class="sah" type="text" />
    <p id="ccc">Survol puis clic.<br />Retour clic hors montage.</p>
    </div>
    <style><!--
    #ccc{position:absolute; z-index;1; width:30vw; text-align:center; font-size:2vw; color:white; text-shadow:0.3vh 0.3vh brown; transform:translate(25vw,18vw);}
    .sah{position:absolute; z-index:1; box-sizing:border-box; width:24vw; height:13.5vw; border:0.6vh ridge white; filter:brightness(70%); webkit-filter:brightness(70%); transition:all 1s linear;}
    #sah1{background:url('http://ekladata.com/BcfvrKssTXC6Ul03dDsfLtT7T0E.jpg'); background-size:cover; transform:translate(28vw,2vw);}
    #sah2{background:url('http://ekladata.com/vieMMay2Rs_jlyt57NJE0_H4dgY.jpg'); background-size:cover; transform:translate(28vw,30vw);}
    #sah3{background:url('http://ekladata.com/FM9SuK67AaCtxDd7jC8D5HnexMM.jpg'); background-size:cover; transform:translate(5vw,7vw) rotate(-10deg);}
    #sah4{background:url('http://ekladata.com/wfmENvDn4nhX_V_sTHnKd4gCVAY.jpg'); background-size:cover; transform:translate(50vw,7vw) rotate(10deg);}
    #sah5{background:url('http://ekladata.com/bm49HHrbc6h_ChXQlO-KBOdf0fU.jpg'); background-size:cover; transform:translate(5vw,23vw) rotate(10deg);}
    #sah6{background:url('http://ekladata.com/2x6jC4K0Iqy9BXKMdeOPKaPzRnU.jpg'); background-size:cover; transform:translate(50vw,23vw) rotate(-10deg);}
    #sah1:hover,#sah2:hover,#sah3:hover,#sah4:hover,#sah5:hover,#sah6:hover{z-index:5; filter:brightness(100%); webkit-filter:brightness(100%);}
    #sah1:focus,#sah2:focus,#sah3:focus,#sah4:focus,#sah5:focus,#sah6:focus{z-index:5; width:80vw; height:45vw; transform:translate(0vw,0vw) rotate(0deg); border:none;filter:brightness(100%); webkit-filter:brightness(100%);}
    --></style>


    Au format 60vw/33.75vw, c'est à dire en 60% de la largeur de votre écran, avec images au ratio 16/9.


    <div style="width: 60vw; height: 33.75vw; margin: 2vh auto; border: 0.6vh ridge white; background: linear-gradient(to bottom, #e9d4b3 0%,#c19e67 50%,#e9d4b3 100%);"><input id="sah1" class="sah" type="text" /><input id="sah2" class="sah" type="text" /><input id="sah3" class="sah" type="text" /><input id="sah4" class="sah" type="text" /><input id="sah5" class="sah" type="text" /><input id="sah6" class="sah" type="text" />
    <p id="ccc">Survol puis clic.<br />Retour clic hors montage.</p>
    </div>
    <style><!--
    #ccc{position:absolute; z-index;1; width:30vw; text-align:center; font-size:1.5vw; color:white; text-shadow:0.3vh 0.3vh brown; transform:translate(15vw,13vw);}
    .sah{position:absolute; z-index:1; box-sizing:border-box; width:20vw; height:11.75vw; border:0.6vh ridge white; filter:brightness(70%); webkit-filter:brightness(70%); transition:all 1s linear;}
    #sah1{background:url('http://ekladata.com/BcfvrKssTXC6Ul03dDsfLtT7T0E.jpg'); background-size:cover; transform:translate(20vw,2vw);}
    #sah2{background:url('http://ekladata.com/vieMMay2Rs_jlyt57NJE0_H4dgY.jpg'); background-size:cover; transform:translate(20vw,20vw);}
    #sah3{background:url('http://ekladata.com/FM9SuK67AaCtxDd7jC8D5HnexMM.jpg'); background-size:cover; transform:translate(2vw,5vw) rotate(-10deg);}
    #sah4{background:url('http://ekladata.com/wfmENvDn4nhX_V_sTHnKd4gCVAY.jpg'); background-size:cover; transform:translate(38vw,5vw) rotate(10deg);}
    #sah5{background:url('http://ekladata.com/bm49HHrbc6h_ChXQlO-KBOdf0fU.jpg'); background-size:cover; transform:translate(2vw,18vw) rotate(10deg);}
    #sah6{background:url('http://ekladata.com/2x6jC4K0Iqy9BXKMdeOPKaPzRnU.jpg'); background-size:cover; transform:translate(38vw,18vw) rotate(-10deg);}
    #sah1:hover,#sah2:hover,#sah3:hover,#sah4:hover,#sah5:hover,#sah6:hover{z-index:5; filter:brightness(100%); webkit-filter:brightness(100%);}
    #sah1:focus,#sah2:focus,#sah3:focus,#sah4:focus,#sah5:focus,#sah6:focus{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw) rotate(0deg); border:none;filter:brightness(100%); webkit-filter:brightness(100%);}
    --></style>