• Question.

    Je plagie Yann en proposant des questions, différentes des siennes et en utilisant mes photos.

    Le principe est de sélectionner une zone quelconque, sur une photo et de n'afficher que cette petite partie.

    Au survol, on affiche la totalité de la photo et l'identification du sujet devient évidente.

    Survolez la vignette. Qu'est-ce que c'est que ça ?

     

    Le principe est de mettre la photo en fond d'un petit paragraphe, positionné où on le souhaite; on peut décorer cette partie, si on le souhaite, en conservant ou non la décoration à l'agrandissement, ce que je ne fais pas apparaître dans le code, pour ne pas le compliquer.

    La partie affichée peut être déterminée par background-position (attention, les valeurs sont en négatif) et si vous voulez que l'agrandissement se fasse à partir de cette position, vous mettrez les mêmes valeurs en transform-translate(,);

    <div style="width: 60vw; height: 33.75vw; margin: 2vh auto; border: 0.1vh solid black; background: radial-gradient(ellipse at center, #b3dced 0%,#29b8e5 50%,#bce0ee 100%);">
    <p id="ya1">Survolez la vignette. Qu'est-ce que c'est que ça ?</p>
    <p id="ya2">&nbsp;</p>
    </div>

    <style><!--
    #ya1{position:absolute; z-index:1; width:60vw; text-align:center; font-size:2vw;}
    #ya2{position:absolute; z-index:1; width:8vw; height:8vw; border-radius:50%; background:url('http://ekladata.com/2U7a_QkQz1MRTUfmBFW3hO6oo9E.jpg'); background-size:60vw 33.75vw; background-position:-25vw -10vw; transform:translate(25vw,10vw);transition:all 1s linear;}
    #ya2:hover{z-index:5; width:60vw; height:33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw); border-radius:0%;}
    --></style>