• Flex-box 1

    J'ai déjà proposé ce genre de montage où le survol d'une div l'agrandissait pendant que les autres rétrécissaient cependant, il fallait paramétrer les largeurs en css.

    Ainsi, l'agrandissement de l'élément survolé pousse les autres jusqu'à leur largeur paramétrée mais ne les comprime pas plus: dommage !

    Un exemple de ce qu'on peut faire avec cette écriture.
    Survolez chaque élément.

    On peut imaginer de placer plusieurs textes ou images, les uns à côté des autres, dans un volume fixe.

    3

    4

    <div id="fl0x">
    <p id="fl1x" class="flx">Un exemple ...</p>
    <p id="fl2x" class="flx">On peut imaginer ...</p>
    <p id="fl3x" class="flx">3</p>
    <p id="fl4x" class="flx">4</p>
    </div>
    <div id="flx0a">
    <p id="fl1xa">....</p>
    </div>
    <style><!--
    #fl0x{width:60vw; height:auto; margin:2vh auto; border:0.2vh solid black; display:flex; justify-content: space-around;}
    .flx{text-align:center; font-size:1vw; line-height:2vw; overflow:hidden; transition:all 1s linear;}
    #fl1x{width:12vw; height:10vw; background:red;}
    #fl2x{width:12vw; height:10vw; background:yellow;}
    #fl3x{width:12vw; height:10vw; background:green;}
    #fl4x{width:12vw; height:10vw; background:white;}
    #fl1x:hover,#fl2x:hover,#fl3x:hover,#fl4x:hover{width:50vw;}
    --></style>