• Zoom Cath

    La question de cette fidèle visiteuse est de faire apparaître une photo de près en survolant une photo de loin.

    Plusieurs façons de faire dont:

     

     

    <div style="width: 826px; height: 600px; margin: 10px auto; background: url('http://ekladata.com/4iqQUJNk9vwNV59Nc-aqyVzdsmg.jpg');">
    <p id="bouton">&nbsp;</p>
    <p id="rose">&nbsp;</p>
    </div>

    <style><!--
    #bouton{position:absolute; z-index:5; width:826px; height:600px;transform:translate(0px, 0px);}
    #rose{position:absolute; z-index:1;width:0px; height:0px; border-radius:50%; background:url('http://ekladata.com/ofy3WfL2W0yHjqbVc13FXmICYIU.jpg'); transform:translate(413px,300px); transition:all 1s linear; background-size:cover;}
    #bouton:hover ~ #rose{width:600px; height:600px; transform:translate(100px, 0px);}
    --></style>

    Dans ce code, l'image apparaît au centre par les attributs surlignés en jaune.

    Si on souhaite faire apparaître le téléphone au dessus de sa position dans la grande image:

     

     

    <div style="width: 826px; height: 600px; margin: 10px auto; background: url('http://ekladata.com/4iqQUJNk9vwNV59Nc-aqyVzdsmg.jpg');">
    <p id="boutonx">&nbsp;</p>
    <p id="rosex">&nbsp;</p>
    </div>

    <style><!--
    #boutonx{position:absolute; z-index:5; width:826px; height:600px;transform:translate(0px, 0px);}
    #rosex{position:absolute; z-index:1;width:0px; height:0px; border-radius:50%; background:url('http://ekladata.com/ofy3WfL2W0yHjqbVc13FXmICYIU.jpg'); transform:translate(750px,300px); transition:all 1s linear; background-size:cover;}
    #boutonx:hover ~ #rosex{width:600px; height:600px; transform:translate(100px, 0px);}
    --></style>

    On peut aussi n'utiliser qu'une image, suffisamment grande pour rester nette à l'agrandissement et la placer en fond de cadre: chargement plus long.

     

    <p id="zz">&nbsp;</p>

    <style><!--
    #zz{width: 800px; height: 600px; margin: 10px auto; background: url('http://ekladata.com/XATm_ZWYn4STa8xSclqjwdJblGY.jpg'); background-size: 100%; background-position: 50% 50%; transition: all 2s linear;}
    #zz:hover{background-size:500%; background-position:10% 30%;}

    --></style>