• Zone réactive 2

    Ma seconde proposition pour faire apparaître une image au survol d'un détail d'un image, est de placer un bouton invisible sur ce détail et que le survol de ce bouton, agrandisse une image en la passant de 0 à la taille désirée.

    Survolez certaines gouttes (4), de préférence par la droite car l'image s'ouvre à gauche,  pour faire apparaître une autre image.

     

     

     

     

     

     

     

     

    <div style="width: 27vw; height: 92vh; border: 0.6vh ridge white; background: url('http://ekladata.com/P4Kx84IT8zsaComs6fAc9hJkrMg.jpg'); background-size: 100% 100%; margin: 2vh 0 0 50vw;">
    <p id="sah1">&nbsp;</p>
    <p id="sah2">&nbsp;</p>
    <p id="sah3">&nbsp;</p>
    <p id="sah4">&nbsp;</p>
    <p id="sah1a">&nbsp;</p>
    <p id="sah2a">&nbsp;</p>
    <p id="sah3a">&nbsp;</p>
    <p id="sah4a">&nbsp;</p>
    </div>

    <style><!--
    #sah1{position:absolute; z-index:1; width:3vw; height:3vw; transform:translate(13vw,21vh);}
    #sah2{position:absolute; z-index:1; width:3vw; height:3vw; transform:translate(15.5vw,33vh);}
    #sah3{position:absolute; z-index:1; width:3vw; height:3vw; transform:translate(11vw,41vh);}
    #sah4{position:absolute; z-index:1; width:3vw; height:3vw; transform:translate(17.5vw,54vh);}
    #sah1a{position:absolute; z-index:1; width:0vw; height:0vh; background:url('http://ekladata.com/3SRNUce5ham_JWWuw2bRg-YmF0E.jpg'); background-size:100% 100%; transform:translate(15vw,23vh); transition:all 1s linear;}
    #sah2a{position:absolute; z-index:1; width:0vw; height:0vh; background:url('http://ekladata.com/_Uus34F3jGtwmJqystqpKgKJMjg.jpg'); background-size:100% 100%; transform:translate(16vw,35vh); transition:all 1s linear;}
    #sah3a{position:absolute; z-index:1; width:0vw; height:0vh; background:url('http://ekladata.com/1w-p_rzMPNxls-J90Rlz_QDctKo.jpg'); background-size:100% 100%; transform:translate(12.5vw,43vh); transition:all 1s linear;}
    #sah4a{position:absolute; z-index:1; width:0vw; height:0vh; background:url('http://ekladata.com/wtkXB2vvEfXxJCFc6ojrGjU24c0.jpg'); background-size:100% 100%; transform:translate(19vw,56vh); transition:all 1s linear;}
    #sah1:hover ~ #sah1a {width:40vw; height:46vh; border:0.2vw ridge white; transform:translate(-30vw,10vh);}
    #sah2:hover ~ #sah2a {width:40vw; height:46vh; border:0.2vw ridge white; transform:translate(-30vw,10vh);}
    #sah3:hover ~ #sah3a {width:40vw; height:46vh; border:0.2vw ridge white; transform:translate(-30vw,10vh);}
    #sah4:hover ~ #sah4a {width:40vw; height:46vh; border:0.2vw ridge white; transform:translate(-30vw,10vh);}
    --></style>

    Les boutons invisibles (sah1/sah2/sah3/sah4) sont positionnés au dessus du détail à survoler.

    Les images invisibles (sah1a/sah2a/sah3a/sah4a), sont placées en même position, en largeur:0vw et hauteur 0vh.

    Le survol d'un bouton anime l'image correspondante, qui prend les dimensions et le positionnement définis.

    Dans mon exemple, j'ai décalé vers le droite l'image de fond pour que les images agrandies restent centrées dans l'écran.