• Montage 87

    8 images au ratio 16/9.
    Remplacez l'adresse de mes images en bleu par les vôtres.

    Survol

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.1vh solid black; background: linear-gradient(to bottom, rgba(0,100,0,0.8) 0%, rgba(100,0,100,0.3) 100%); background-size: cover;">
    <p id="sur">Survol</p>
    <p id="los1" class="los">&nbsp;</p>
    <p id="los2" class="los">&nbsp;</p>
    <p id="los3" class="los">&nbsp;</p>
    <p id="los4" class="los">&nbsp;</p>
    <p id="los5" class="los">&nbsp;</p>
    <p id="los6" class="los">&nbsp;</p>
    <p id="los7" class="los">&nbsp;</p>
    </div>

    <style><!--
    #sur{position:absolute; z-index:1; width:10vw; background:rgba(0,0,0,0.5); transform:translate(25vw,0vw); text-align:center; line-height:2vw; font-size:1.5vw; color:white; text-shadow:0.2vh 0.2vh black;}
    .los{position:absolute; z-index:1; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.8vh black; filter:grayscale(1); transition:all 1s linear;}
    #los1{box-sizing:border-box; width:15vw; height:4vw; border-radius:2.5vw; transform:translate(5vw,4vw); background:url('http://ekladata.com/ZvF_18mKpk5Ja2PFZhy_-ETjg8g.jpg'); background-size:cover; background-position:50% 50%;}
    #los2{box-sizing:border-box; width:15vw; height:4vw; border-radius:2.5vw; transform:translate(40vw,4vw); background:url('http://ekladata.com/CE2nSQhalhyOJb8U8iapGHWQFlo.jpg'); background-size:cover; background-position:50% 50%;}
    #los3{box-sizing:border-box; width:30vw; height:4vw; border-radius:2.5vw; transform:translate(15vw,9vw); background:url('http://ekladata.com/wFy2cu4NSZjqchQWJ-Kn8IeXWFI.jpg'); background-size:cover; background-position:50% 50%;}
    #los4{box-sizing:border-box; width:15vw; height:4vw; border-radius:2.5vw; transform:translate(23vw,14vw); background:url('http://ekladata.com/fd2RHKvLd4KNBBI5_IFmVNtsyp8.jpg'); background-size:cover; background-position:50% 50%;}
    #los5{box-sizing:border-box; width:30vw; height:4vw; border-radius:2.5vw; transform:translate(15vw,19vw); background:url('http://ekladata.com/Bk6I3LoqGDtqbborRbrykJDBTa8.jpg'); background-size:cover; background-position:50% 50%;}
    #los6{box-sizing:border-box; width:15vw; height:4vw; border-radius:2.5vw; transform:translate(5vw,24vw); background:url('http://ekladata.com/7S6vNitSBb7JnP2r_xuL2PXui4w.jpg'); background-size:cover; background-position:50% 50%;}
    #los7{box-sizing:border-box; width:15vw; height:4vw; border-radius:2.5vw; transform:translate(40vw,24vw); background:url('http://ekladata.com/GToN23GIGphq5c2PMGtZOIfvL_U.jpg'); background-size:cover; background-position:50% 50%;}
    #los1:hover,#los2:hover,#los3:hover,#los4:hover,#los5:hover,#los6:hover,#los7:hover{z-index:5; width:60vw; height:33.75vw; box-shadow:none; border:none; border-radius:0vw; filter:grayscale(0);transform:translate(0vw,0vw);}
    --></style>

    Le dégradé de fond est facilement adaptable à vos choix:

    background: linear-gradient(to bottom, rgba(0,100,0,0.8) 0%, rgba(100,0,100,0.3) 100%);

    Amusez-vous à modifier la couleur du haut (0%) et/ou du bas (100%) en modifiant les valeurs par une valeur entre 0 et 255:

    ex:rgba(255,0,120,0.8) ou rgba(140,200,25,0.3)....

    Si vous souhaitez que le dégradé change de sens (du vas vers le haut), vous écrivez to top au lieu de to bottom.

    Il y a également possibilité de créer d'autres formes de dégradés: voir http://www.colorzilla.com/gradient-editor/