• Exemple 12c

     

    Survol jusqu'à coloration

     

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; text-align: left;">
    <p id="fet0">Survol jusqu'&agrave; coloration</p>
    <p id="fet1" class="fet">&nbsp;</p>
    <p id="fet2" class="fet">&nbsp;</p>
    <p id="fet3" class="fet">&nbsp;</p>
    <p id="fet4" class="fet">&nbsp;</p>
    <p id="fet5" class="fet">&nbsp;</p>
    <p id="fet6" class="fet">&nbsp;</p>
    <p id="fet7" class="fet">&nbsp;</p>
    <p id="fet8" class="fet">&nbsp;</p>
    <p id="fet9" class="fet">&nbsp;</p>
    </div>
    <style><!--
    #fet0{position:absolute; z-index:1; width:30vw; font-size:2vw; transform:translate(15vw,0vw);}
    .fet{position:absolute; filter:grayscale(1); transition:transform 1s linear 0s,width 1s linear 0s, height 1s linear 0s,border 1s linear 0s, filter 1s linear 1s;}
    #fet1{z-index:1; width:8vw; height:30vw; border:0.4vh solid white; transform:translate(1vw,2vw) perspective(10vw) rotateY(20deg); transform-origin:center left; background:url('http://ekladata.com/9DnV2LeF_ab7_Tu32xVE00d3fmQ@1152x648.jpg'); background-size:cover;}
    #fet2{z-index:1; width:8vw; height:22vw; border:0.4vh solid white; transform:translate(8vw,6vw) perspective(10vw) rotateY(25deg); transform-origin:center left; background:url('http://ekladata.com/OdUKmq60I77W3l7QFfOpl36DpVM@1152x648.jpg'); background-size:cover;}
    #fet3{z-index:1; width:8vw; height:16vw; border:0.4vh solid white; transform:translate(14.5vw,9vw) perspective(10vw) rotateY(30deg); transform-origin:center left; background:url('http://ekladata.com/r_PI_yD4borReG5yzs4vIyKrDwE@1152x648.jpg'); background-size:cover;}
    #fet4{z-index:1; width:8vw; height:10vw; border:0.4vh solid white; transform:translate(20.5vw,12vw) perspective(10vw) rotateY(35deg); transform-origin:center left; background:url('http://ekladata.com/uuRODq4LKqVuB1y9B1U8NBj8AGw@1152x648.jpg'); background-size:cover;}
    #fet5{z-index:1; width:8vw; height:6vw; border:0.4vh solid white; transform:translate(26vw,14vw) perspective(0vw) rotateY(0deg); transform-origin:center center; background:url('http://ekladata.com/tr8E1WRjufoXH2qg8GEvG3lbPpM@1152x648.jpg'); background-size:cover;}
    #fet6{z-index:1; width:8vw; height:10vw; border:0.4vh solid white; transform:translate(31.5vw,12vw) perspective(10vw) rotateY(-35deg); transform-origin:center right; background:url('http://ekladata.com/FZSlHd_6y8N5aUeB_RrihuTnLZw@1152x648.jpg'); background-size:cover;}
    #fet7{z-index:1; width:8vw; height:16vw; border:0.4vh solid white; transform:translate(37.5vw,9vw) perspective(10vw) rotateY(-30deg); transform-origin:center right; background:url('http://ekladata.com/yWU1pZJBMVOkoJeoxPcQxARffVI@1152x648.jpg'); background-size:cover;}
    #fet8{z-index:1; width:8vw; height:22vw; border:0.4vh solid white; transform:translate(43.5vw,6vw) perspective(10vw) rotateY(-25deg); transform-origin:center right; background:url('http://ekladata.com/erXG3z42o4geHfxwxobRiJGtDuQ@1152x648.jpg'); background-size:cover;}
    #fet9{z-index:1; width:8vw; height:30vw; border:0.4vh solid white; transform:translate(50vw,2vw) perspective(10vw) rotateY(-20deg); transform-origin:center right; background:url('http://ekladata.com/HNuRcP4dp4UCIk1C5rpaoheemkQ@1152x648.jpg'); background-size:cover;}
    #fet1:hover,#fet2:hover,#fet3:hover,#fet4:hover,#fet5:hover,#fet6:hover,#fet7:hover,#fet8:hover,#fet9:hover{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw); filter:grayscale(0);}
    --></style>