• Images et texte 2

    Ma page précédente propose deux images de 450x600px et une zone texte centrale de 400x600px.

    Conservons la même zone texte, toujours au centre et plaçons deux images de 800x600px.

     

    Survolez les images latérales.

    Le code est le même que le précédent; le centrage des vignettes est le même, mes sujets étant centrés dans les images

    Je vous laisse le soin d'ajuster en fonction de vos images.

     

     

    <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 solid white; background:url('http://ekladata.com/Ox0biaKqTV0UMuhL7voYSmY-o4o.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 solid white; background:url('http://ekladata.com/Jeb5IqleUCpnC2PnvYGYdJNTuKY.jpg'); background-position:50% 0%;}
    #mgg:hover{width:800px; z-index:5; transform:translate(0px,0px);}
    #mgd:hover{width:800px; z-index:5; transform:translate(0px,0px);}
    --></style>
    ...
    Les différences avec les images en 450px de large, sont surlignées en jaune.