• ça roule

    A la demande d'une fidèle visiteuse, voici le code de mon article en 60vw/33.75vw (16/9) avec un fond en image.

    Je reviendrai sur l'utilisation d'un site bien pratique: http://www.colorzilla.com/gradient-editor/ qui permet des dégradés variés, en nous fournissant un code "clef en mains".

     

     

     

     

     

    Survol

    <div style="width: 60vw; height: 33.75vw; border: 0.4vh ridge grey; margin: 2vh auto; background: url('http://ekladata.com/T26nDnvzWj5QbfMIsSEgT3KRw7o.jpg'); background-size: cover;">
    <p id="f2" class="feu">&nbsp;</p>
    <p id="f3" class="feu">&nbsp;</p>
    <p id="f4" class="feu">&nbsp;</p>
    <p id="f5" class="feu">&nbsp;</p>
    <p id="f6">Survol</p>
    </div>

    <style><!--
    .feu{position:absolute; z-index:1; width:15vw; height:15vw; border-radius:50%; box-shadow:inset 0.8vh 0.8vh 1.4vh black, inset -0.8vh -0.8vh 1.4vh white; border:0.2vh solid black; transition:all 1s linear;}
    #f2{background:url('http://ekladata.com/cfGPZfmh1sSe3hKlXqBrcwv6Z4s.jpg'); background-size:60vw 33.75vw; background-position:center center; transform:translate(3vw,2vw);}
    #f3{background:url('http://ekladata.com/gPihEbUjws7tR76wjXGCe-3Rtxc.jpg'); background-size:60vw 33.75vw; background-position:center center; transform:translate(42vw,2vw);}
    #f4{background:url('http://ekladata.com/FeP-FGXSNJTkxk7LgT0ct-npCxs.jpg'); background-size:60vw 33.75vw; background-position:center center; transform:translate(13vw,15vw);}
    #f5{background:url('http://ekladata.com/3Flg-7sXHsFxZqNGAA-nwUAZ9XA.jpg'); background-size:60vw 33.75vw; background-position:center center; transform:translate(32vw,15vw);}
    #f6{position:absolute; z-index:1; width:10vw; transform:translate(25vw,5vw); text-align:center; font-size:3vw; color:white; text-shadow:0.2vh 0.2vh black;}
    #f2:hover,#f3:hover,#f4:hover,#f5:hover{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw); border:none; border-radius:0%;}
    --></style>