• Construisons notre montage.1

    Regardons le principe de construction d'un montage simple:

    _ un cadre, avec ou sans bordure et avec ou sans couleur ou image de fond,

    _ des vignettes qui s'agrandissent au survol, pour remplir le cadre.

    Pour l'exemple, mon premier cadre aura bordure et couleur de fond et une dimension en unités adaptatives de 60vw en largeur par 69vh en hauteur, soit environ 60% des dimensions d'une écran en 16/9.

    <div style="width:60vw; height:69vh; margin:2vh auto; border:0.3vh ridge white; background:linear-gradient(to bottom, rgba(100,0,0,0.5) 0%, rgba(0,100,1,0.5) 100%);">&nbsp;</p>

    Ce qui vous donnera :

     

    Dedans, nous allons placer 4 vignettes, qui auront, pour le moment, un fond coloré mais qui contiendront des images dans nos montages.

    Chaque vignette sera positionnée en indépendant (position:absolute), pour être animée sans influer sur les autres.

    Chacune sera positionnée en arrière plan (z-index:1) pour passer au premier plan au survol (z-index:5).

    <div style="width:60vw; height:69vh; margin:2vh auto; border:0.3vh ridge white; background:linear-gradient(to bottom, rgba(100,0,0,0.5) 0%, rgba(0,100,1,0.5) 100%);">
    <p id="vg1">image 1</p>
    <p id="vg2">image 2</p>
    <p id="vg3">image 3</p>
    <p id="vg4">image 4</p>
    </p>
    </div>
    <style><!--
    #vg1{position:absolute; z-index:1;width:10vw; height:12vh; background:yellow; transform:translate(0vw,0vh); transition:all 1s linear;}
    #vg2{position:absolute; z-index:1;width:10vw; height:12vh; background:yellow; transform:translate(17vw,0vh); transition:all 1s linear;}
    #vg3{position:absolute; z-index:1;width:10vw; height:12vh; background:yellow; transform:translate(33vw,0vh); transition:all 1s linear;}
    #vg4{position:absolute; z-index:1;width:10vw; height:12vh; background:yellow; transform:translate(50vw,0vh); transition:all 1s linear;}
    --></style>

    Ce qui nous donnera, sans animation et sans mise en forme particulière:

    image 1

    image 2

    image 3

    image 4

    Ajoutons l'animation en une seule ligne, puisque chacune reçoit la même animation au survol.

    <div style="width:60vw; height:69vh; margin:2vh auto; border:0.3vh ridge white; background:linear-gradient(to bottom, rgba(100,0,0,0.5) 0%, rgba(0,100,1,0.5) 100%);">
    <p id="vg1a">image 1</p>
    <p id="vg2a">image 2</p>
    <p id="vg3a">image 3</p>
    <p id="vg4a">image 4</p>
    </p>
    </div>
    <style><!--
    #vg1a{position:absolute; z-index:1;width:10vw; height:12vh; background:yellow; transform:translate(0vw,0vh); transition:all 1s linear;}
    #vg2a{position:absolute; z-index:1;width:10vw; height:12vh; background:red; transform:translate(17vw,0vh); transition:all 1s linear;}
    #vg3a{position:absolute; z-index:1;width:10vw; height:12vh; background:green; transform:translate(33vw,0vh); transition:all 1s linear;}
    #vg4a{position:absolute; z-index:1;width:10vw; height:12vh; background:coral; transform:translate(50vw,0vh); transition:all 1s linear;}
    #vg1a:hover, #vg2a:hover, #vg3a:hover, #vg4a:hover{z-index:5; width:60vw; height:69vh; transform:translate(0vw,0vh);}
    --></style>

    image 1

    image 2

    image 3

    image 4

    Voila pour le principe; dans les pages suivantes, je vais vous proposer quelques mises en forme et positionnements différents mais vous pourrez en imaginer d'autres, en vous rappelant que la bordure et la couleur de fond sont facultatives.