• Position 1

    Sachant positionner une image sur un autre et l'animer au survol, nous avons les bases d'un montage type diaporama (page position).

    Mes images font 800x600px et sont réduite en vignettes à 160x120px.

    Reprenons le code précédent, sans image de fond (background) pour le cadre principal car, dans un modèle que nous aborderons, nous modifierons ce fond en noir et blanc et afin que seule le fond soit en noir et blanc (et non tout le montage), il faut qu'il soit saisi en indépendant.

     

     

     

    Code.
    <div id="fd1">
    <p id="m1">&nbsp;</p>
    <p id="m2">&nbsp;</p>
    </div>

    <style><!--
    #fd1{position:relative; margin:10px auto; width:800px; height:600px; border:4px ridge white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/06/96.jpg');}
    #m1{ position:absolute; transition:all 1s linear; transform:translate(50px,50px) rotate(15deg); width:160px; height:120px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/06/14.jpg'); border:2px solid white; box-shadow:3px 3px black;}
    #m2{ position:absolute; transition:all 1s linear; transform:translate(350px,300px) rotate(-10deg); width:160px; height:120px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/06/85.jpg'); border:2px solid white; box-shadow:3px 3px black;}
    #m1:hover{transform:translate(0px,0px) rotate(0deg); width:800px; height:600px; border:0px solid white; box-shadow:0px 0px black;}
    #m2:hover{transform:translate(0px,0px) rotate(0deg); width:800px; height:600px; border:0px solid white; box-shadow:0px 0px black;}
    --></style>
    ...
    La partie html (4 premières lignes) ne comporte aucun élément précis et ne sert qu'à créer l'élément.
    Dans la partie CSS (entre style), nous donnons les attributs que nous voulons, à chaque élément.
    Pour cela, nous avons donné un nom à chacun et, en face de son nom, nous allons définir sa forme, sa position et ensuite, son animation au survol (:hover)
    Cette façon d'écrire permet de modifier facilement un code; nous en verrons l'utilité ensuite, sur d'autres exemples à la même partie html !
    Je vous laisse lire la ligne des attribut d'une image: position indépendante, vitesse animation, position dans le cadre principal avec rotation (facultatif), largeur et hauteur au départ, image placée en fond, bordure et ombre.
    Au survol, nous modifions la position et les dimensions, annulons la rotation, la bordure et l'ombre et indiquons la position en profondeur (z-index) pour que notre image s'agrandisse en premier plan.

    **************

    Pour être le plus clair possible, je ne vais aborder qu'un type de montage par page, même si le suivant sera très approchant.