• Exemple 7

    Même principe que "Exemple 6" mais avec transition.

    Clic

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.6vh ridge white; background:url('http://ekladata.com/9UP2wuSbngiTVioCtzCn2T19V5M.jpg'); background-size:60vw 33.75vw;"><input id="ph1" class="ph" type="text" /><input id="ph2" class="ph" type="text" /><input id="ph3" class="ph" type="text" /><input id="ph4" class="ph" type="text" /><input id="ph5" class="ph" type="text" /><input id="ph6" class="ph" type="text" /><input id="ph7" class="ph" type="text" /><input id="ph8" class="ph" type="text" />
    <p id="clic">Clic</p>
    <p id="mtg1" class="mtg">&nbsp;</p>
    <p id="mtg2" class="mtg">&nbsp;</p>
    <p id="mtg3" class="mtg">&nbsp;</p>
    <p id="mtg4" class="mtg">&nbsp;</p>
    <p id="mtg5" class="mtg">&nbsp;</p>
    <p id="mtg6" class="mtg">&nbsp;</p>
    <p id="mtg7" class="mtg">&nbsp;</p>
    </div>

    <style><!--
    #clic{position:absolute; z-index:2; width:5vw; text-align:center; font-size:1.5vw; color:white; text-shadow:0.1vh 0.1vh black; background:rgba(0,0,0,0.5);}
    .ph{position:absolute; z-index:5; width:60vw; height:33.75vw; border:none; background:transparent;}
    #ph1{z-index:9;}

    .mtg{position:absolute; z-index:1;width:40vw; height:22.25vw; transform:translate(10vw,5.75vw) rotatey(90deg); transition:all 1s linear;}
    #mtg1{background:url('http://ekladata.com/H5zHis1MMDKynZgwB0DtChOjlCI.jpg'); background-size:cover;}
    #mtg2{background:url('http://ekladata.com/OGpCpW2RFlF6rO136fILg-tS_Ws.jpg'); background-size:cover;}
    #mtg3{background:url('http://ekladata.com/eDjIxbjnKoG7RX0XjTgNrv3ji5M.jpg'); background-size:cover;}
    #mtg4{background:url('http://ekladata.com/jnhDgjlHr4QqFZsJfTUr7qK40QY.jpg'); background-size:cover;}
    #mtg5{background:url('http://ekladata.com/QylzWJaWKu8qb3q14UaNPxBHwMM.jpg'); background-size:cover;}
    #mtg6{background:url('http://ekladata.com/Iz7nvxeAdD1sw4pRsQ-EBLdrHIY.jpg'); background-size:cover;}
    #mtg7{background:url('http://ekladata.com/JgWOKxlQdc-rTwJXVtjZdwEWY_Y.jpg'); background-size:cover;}

    #ph1:focus ~ #ph2,#ph2:focus ~ #ph3,#ph3:focus ~ #ph4,#ph4:focus ~ #ph5,#ph5:focus ~ #ph6,#ph6:focus ~ #ph7,#ph7:focus ~ #ph8{ z-index:10;}
    #ph1:focus ~ #mtg1,#ph2:focus ~ #mtg2,#ph3:focus ~ #mtg3,#ph4:focus ~ #mtg4,#ph5:focus ~ #mtg5,#ph6:focus ~ #mtg6,#ph7:focus ~ #mtg7{z-index:3;width:60vw; height:33.75vw; transform:translate(0vw,0vw) rotatey(0deg);}

    --></style>