• Présentation article

    L'exemple de ma page précédente me fait penser à une variante de montage, utilisable sur des pages de blogs étroites ou pour une présentation particulière:

    Exemple du principe: Survolez chaque élément.

    Text 1
    Image
    Text 2

    Les zones texte s'agrandissent au survol, en passant au dessus de l'image centrale
    L'image centrale a une animation, qui peut être un agrandissement au dessus des zones texte ou simplement en conservant ses dimensions.
    Ainsi, votre article peut être étroit en affichage et utiliser la largeur de votre page au survol.
    Mon exemple d'agrandissement des zones texte ne fait que recouvrir la zone image mais on peut recouvrir l'ensemble du montage.

    Survol image qui ne modifie pas sa taille.

    Michel est excédé ; il vient voir Henri le fermier voisin et il lui dit:
    Henri, ton coq commence à me les briser menues !
    Qu’'il chante à l'’aube, bon, c’est normal, tous les coqs font ça.
    Ensuite il chante à midi…
    Bon, ça va encore. Après ça il chante en plein après-midi…. Là je commence à en avoir marre…
    Et il remet ça au coucher du soleil ; il est dingue ce coq !
    Et alors le bouquet final, le voilà qui chante en pleine nuit !
    Tu dois faire quelque chose.… Il emmerde tout l’'monde !
    Je sais, répond Henri…, j’'y peux rien…
    Il s’'est converti à l'’islam et depuis il chante cinq fois par jour !

     
    Code

    <div style="width: 810px; height: 605px; margin: 10px auto;">
    <div id="pg1">Text 1</div>
    <div id="pc1">Image</div>
    <div id="pd1">Code</div>
    </div>
    <style><!--
    #pg1{transition:all 1s linear; position:absolute; transform:translate(0px,0px); width:150px; height:600px; border:1px solid black; background-color:lime; text-align:left; font-size:12pt; }
    #pc1{transition:all 1s linear; position:absolute; transform:translate(150px,0px); width:500px; height:600px; border:1px solid black; background:url(http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/23/90x120.jpg); background-size:100%; font-size:12pt;background-position:center center; }
    #pd1{transition:all 1s linear; position:absolute; transform:translate(650px,0px); width:150px; height:600px; border:1px solid black; background-color:coral; text-align:left; font-size:12pt; }
    #pg1:hover{z-index:2; width:800px;}
    #pc1:hover{background-size:200%; background-position:center center;}
    #pd1:hover{z-index:2; width:800px; transform:translate(0px,0px);}
    --></style>

    Survol image qui couvre la totalité du montage.
     
    Code

    <div style="width: 810px; height: 610px; margin: 10px auto;">
    <div id="pg2">Text 1</div>
    <div id="pc2">Image</div>
    <div id="pd2">Code<p id="t3">...<br>...<br>...<br>...</p></div>
    </div>
    <style><!--
    #pg2{transition:all 1s linear; position:absolute; transform:translate(0px,0px); width:150px; height:600px; border:1px solid black; background-color:lime; text-align:left; font-size:12pt; }
    #pc2{transition:all 1s linear; position:absolute; transform:translate(150px,0px); width:500px; height:600px; border:1px solid black; background:url(http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/23/8x65714.JPG); background-position:center center; }
    #pd2{transition:all 1s linear; position:absolute; transform:translate(650px,0px); width:150px; height:600px; border:1px solid black; background-color:coral; text-align:left; font-size:12pt; overflow:hidden; }
    #t3{width:650px; height:600px; margin:0 0 0 150px;}
    #pg2:hover{z-index:2; width:800px;}
    #pc2:hover{z-index:2; width:800px; transform:translate(0px,0px); background-position:center center;}
    #pd2:hover{z-index:2; width:800px; transform:translate(0px,0px); opacity:1;}
    --></style>
    ...

    Survol image qui couvre la totalité du montage.


    "Si la vieillesse enfin vous glace,
    Sachez renoncer aux amours.
    Que l'amitié prenant leur place
    Embellisse vos derniers jours."
    -->

     
    Histoire

    Un vieux et paisible ménage
    Connaît encore quelques douceurs
    L'hiver a des jours sans nuages,
    Et sous la neige, il est des fleurs."

    Mme De Salm