• Exemple 117

    Clic sur chaque flocon;  2 images de flocons et 6 images au ratio 16/9; retour pas un clic sur image. 

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; text-align: left; ">

    <input id="flo1" class="flo" src="http://ekladata.com/68JW4aY_Bb8PMpbqZ_pA3RtMM2o.gif" type="image" />

    <input id="flo2" class="flo" src="http://ekladata.com/CPzJJqcahRp6LgvkT4-3cTLq9g4.gif" type="image" />

    <input id="flo3" class="flo" src="http://ekladata.com/CPzJJqcahRp6LgvkT4-3cTLq9g4.gif" type="image" />

    <input id="flo4" class="flo" src="http://ekladata.com/68JW4aY_Bb8PMpbqZ_pA3RtMM2o.gif" type="image" />

    <input id="flo5" class="flo" src="http://ekladata.com/CPzJJqcahRp6LgvkT4-3cTLq9g4.gif" type="image" />

    <input id="flo6" class="flo" src="http://ekladata.com/68JW4aY_Bb8PMpbqZ_pA3RtMM2o.gif" type="image" />

    <img id="floc1" class="floc" src="http://ekladata.com/CXW9sVIKE_mAXRW77n5DOOgAT-c.jpg" alt="" />

    <img id="floc2" class="floc" src="http://ekladata.com/CXW9sVIKE_mAXRW77n5DOOgAT-c.jpg" alt="" />

    <img id="floc3" class="floc" src="http://ekladata.com/lb0XEnu6-FfIIrURfmfuvh1RTf8.jpg" alt="" />
    <img id="floc4" class="floc" src="http://ekladata.com/rEG5v_arhpMP1cZekpeUfO4TXJA.jpg" alt="" />
    <img id="floc5" class="floc" src="http://ekladata.com/9BqsftYrb8g9dzsldSYH8a7FAvI.jpg" alt="" />
    <img id="floc6" class="floc" src="http://ekladata.com/k3MeAiQlnL-cQjuec5WDWc0K9fs.jpg" alt="" />
    </div>

    <style><!--
    .flo{position:absolute; z-index:1; width:10vw; height:10vw; border:none; background:transparent;}
    #flo1{transform:translate(5vw,5vw);}
    #flo2{transform:translate(10vw,20vw);}
    #flo3{transform:translate(25vw,3vw);}
    #flo4{transform:translate(30vw,15vw);}
    #flo5{transform:translate(42vw,8vw);}
    #flo6{transform:translate(45vw,20vw);}
    .floc{position:absolute; z-index:5; width:0vw; height:0vw; transition:all 1s linear;}
    #floc1{transform:translate(10vw,10vw);}
    #floc2{transform:translate(15vw,25vw);}
    #floc3{transform:translate(30vw,8vw);}
    #floc4{transform:translate(35vw,20vw);}
    #floc5{transform:translate(47vw,13vw);}
    #floc6{transform:translate(50vw,25vw);}
    #flo1:focus ~ #floc1,#flo2:focus ~ #floc2,#flo3:focus ~ #floc3,#flo4:focus ~ #floc4,#flo5:focus ~ #floc5,#flo6:focus ~ #floc6{width:60vw; height:33.75vw; transform:translate(0vw,0vw);}
    --></style>