• Images latérales 1

    Dans une zone article de 800x600px, on peut vouloir afficher des images et du texte, sans vouloir placer les éléments les uns sur les autres.

    Par exemple, on peut vouloir placer un texte central et les illustrations de chaque côté ou simplement une zone texte et, à coté, une zone comportant une ou plusieurs images, en format réduit, qui vont s'agrandir à leur survol, au premier plan; ainsi, si votre texte fait allusion à une photo particulière, vous pourrez donner un repère à cette photo et faire apparaître le repère dans le texte, pour que le visiteur agrandisse l'image correspondante au texte .. ou toute présentation à votre goût !

     

    Survolez les images latérales.

    Mes deux images exemple font 450x600px.

    Pour essayer d'être clair, je vais préparer d'autres pages avec des images et des positionnements différents.

     

     

    <div style="width: 800px; height: 600px; margin: 5px auto;">
    <p id="mgg">&nbsp;</p>
    <p id="mgc"><span style="background-color: #ffff00;">Survolez les images lat&eacute;rales.</span></p>
    <p id="mgd">&nbsp;</p>
    </div>
    <style type="text/css"><!--
    #mgg{position:absolute; transition:all 1s linear; transform:translate(0px,0px); width:200px; height:600px; border: 3px double white; background:url('http://ekladata.com/nLqQUUEySHP3iWxGG5sS-sPwuvY.jpg'); background-position:50% 0%;}
    #mgc{position:absolute; transition:all 1s linear; transform:translate(200px,0px); width:380px; height:600px; padding:10px; text-align:center; font-size:12pt; }
    #mgd{position:absolute; transition:all 1s linear; transform:translate(600px,0px); width:200px; height:600px; border: 3px double white; background:url('http://ekladata.com/K0-8egcMGl3w2gy2vqqVGjtYoFo.jpg'); background-position:50% 0%;}
    #mgg:hover{width:450px; z-index:5; transform:translate(0px,0px);}
    #mgd:hover{width:450px; z-index:5; transform:translate(350px,0px);}
    --></style>

    Cette ligne est facultative; il s'agit, pour moi, de présenter un article de 800px centré dans une page de 1200px mais chaque élément est positionné en indépendant (absolute).
    Remarquez le background-position:50% 0%;  qui va sélectionner la partie horizontale centrée (50%) de l'image entière; cette valeur peut être modifiée en fonction de la position du sujet dans l'image..