• 31.12.23A

    Reprise d'une page déjà publiée mais en unités adaptatives; la voici en 800x600px + bordure et ombre.

    Voir aussi autres pages sur cette attribut (flex) ICI

    5 images au ratio 4/3 en 800x600px à survoler: elles s'agrandissent en poussant les autres.

     

     

     

     

     


    <div id="fx1">
    <p id="ca" class="c1">&nbsp;</p>
    <p id="cb" class="c1">&nbsp;</p>
    <p id="cc" class="c1">&nbsp;</p>
    <p id="cd" class="c1">&nbsp;</p>
    <p id="ce" class="c1">&nbsp;</p>
    </div>

    <style><!--
    #fx1{display:flex; width:800px; height:600px; border:4px ridge white; box-shadow:4px 4px 8px black; margin:40px auto;}
    .c1{height:600px; flex:1; transition:1s;}
    #ca {background:url('http://ekladata.com/v2q68OSMr4gRLzYwm5oIzMARC1A.jpg');background-size:800px 600px; }
    #cb {background:url('http://ekladata.com/fUdKqoJihfRs0sOpG6iK17435Sw.jpg');background-size:800px 600px;}
    #cc {background:url('http://ekladata.com/dzx0Sz7v03I7gQOE-i-bOFCW9EE.jpg');background-size:800px 600px;}
    #cd {background:url('http://ekladata.com/OJV61VsT-h3idM2hOSX01JQKAlE.jpg');background-size:800px 600px;}
    #ce {background:url('http://ekladata.com/QHZ1Jt5-V0hUM1YlTiftQSQ6EYc.jpg');background-size:800px 600px;}
    #ca:hover,#cb:hover,#cc:hover,#cd:hover,#ce:hover{ background-position:0px 0px); flex:200;}
    #ca:hover,#cb:hover,#cc:hover,#cd:hover,#ce:hover{flex:200;}
    --></style>