• Survol 1

    Nous avons vu comment copier l'adresse d'une image, après l'avoir hébergée sur un site et comment la dimensionner.

    Le survol d'une image pour en faire apparaitre une autre est un peu brutal, dans le modèle proposé dans la page précédente; une autre écriture permet différentes animations en douceur.

    Premier exemple: le principe est de placer, au dessus de la première image, une seconde image transparente qui devient visible au survol, selon une animation à paramétrer.

    <div style="width:900px; height:506px; margin:5px auto; border:3px ridge black; text-align:left;">
    <img id="sv1" src="http://ekladata.com/5nRDTXrXDZEO_FP6682hFlEQeKw@900x506.jpg">
    <img id="sv2" src="http://ekladata.com/K0_8ykjFqlqwvKMl7Osk2p4yimo@900x506.jpg">
    </div>
    <style><!--
    #sv1{position:absolute;}
    #sv2{position:absolute; opacity:0; transition:all 1s linear;}
    #sv2:hover{opacity:1;}
    --></style>

    Le cadre du montage (div) est dimensionné à la dimension des images (900px par 506px: ratio 16/9) et centré dans la page (margin:5px auto).

    L'attribut text-align:left est particulier à mon blog, paramétré avec un alignement centré, qu'il faut donc annuler ponctuellement.

    Les images sont placées en position:absolute; de façon à être indépendante l'une de l'autre, la première écrite (sv1) étant sous la seconde (sv2) par défaut.

    La seconde (sv2) est transparente (opacity:0;) et devient opaque au survol (hover{opacity:1;})

    ****************

    L'inconvénient de la commande au survol est qu'il faut que le curseur reste sur l'élément pour en animer un autre et que ce second ne doit pas se placer entre le curseur et l'élément survolé.

    Dans ce cas, il nous faudra ajouter un élément invisible ... à suivre !