• Zone réactive 1

    Une demande m'avait été formulée concernant un montage que j'ai peut-être supprimé: c'est ma manie !

    Il s'agissait de survoler une partie d'une grande image pour en agrandir ce détail ou encore faire apparaître une autre image.

    Pour agrandir un détail d'une grande image, le plus simple, me semble-t-il, est d'agrandir la taille de l'image en fond et de positionner l'agrandissement sur le détail en question.

    Dans cet exemple, survolez les panneaux routiers, la panneau de la bière et la voiture du fond, en laissant votre curseur sur cette position.

    Ma prochaine page concernera l'apparition d'une autre image au survol d'une ou de plusieurs parties d'une image.

     

     

     

     

    <div style="width: 80vw; height: 92vh;">
    <p id="sah1">&nbsp;</p>
    <p id="sah2">&nbsp;</p>
    <p id="sah3">&nbsp;</p>
    <p id="sah4">&nbsp;</p>
    </div>

    <style><!--
    #sah1{position:absolute; z-index:5; width:7vw; height:15vh; transform:translate(12vw,42vh);}
    #sah2{position:absolute; z-index:5; width:3vw; height:3vw; transform:translate(38vw,49vh);}
    #sah3{position:absolute; z-index:5; width:4vw; height:4vw; transform:translate(60vw,60vh);}
    #sah4{position:absolute; z-index:1; width:80vw; height:92vh; background:url('http://ekladata.com/hmkgRRyVAXrtenCRetv-8tTdBCE.jpg'); background-size:100% 100%; background-position:50% 50%; transition:all 1s linear;}
    #sah1:hover ~ #sah4{background-size:200% 200%; background-position:0% 50%; filter:contrast(1.3); webkit-filter:contrast(1.3);}
    #sah2:hover ~ #sah4{background-size:200% 200%; background-position:50% 60%; filter:contrast(1.3); webkit-filter:contrast(1.3);}
    #sah3:hover ~ #sah4{background-size:200% 200%; background-position:90% 80%; filter:contrast(1.3); webkit-filter:contrast(1.3);}
    --></style>

    Les boutons invisibles (sah1/sah2/sah3) sont écrits en premier, avant l'élément animé.

    En construisant votre montage, vous pourrez leur mettre une bordure afin de les positionner facilement, en effaçant ensuite cette bordure (ou non !).

    L'image est placée en fond d'un paragraphe, en taille 100% 100% (H/V).

    Le survol d'un boutons va modifier la taille de l'image de fond (background-size), sa position pour centrer le détail (background-position).

    J'ai ajouté un filtre pour augmenter le contraste au survol car l'agrandissement nuit à la netteté de l'image.