• clic et survol

    Je prépare cette page en parlant du principe avant de proposer un code exemple, question de temps disponible car un article, avec les images à sélectionner, à héberger, à en récupérer les adresses pour les placer dans un code préparé, ceela prend tout de même pas mal de temps !

    Une visiteuse, (je crois), m'avait proposer l'idée d'un montage où un clic dessus, faisait apparaître des images ou des paragraphes texte, que l'on pouvait agrandir au survol.

    Un manque de réflexion, à l'époque, ne m'avait pas permis de trouver le truc !

    Car, pour cliquer ou survoler un élément, il faut que celui-ci soit en premier plan or, le bouton invisible à cliquer se trouvant en premier plan, il empêchait d'animer les images du montage en dessous.

    Le truc est tout bête: en cliquant sur le bouton invisible, qui est de la dimension du montage, on le fait se réduire à une dimension de 0px par 0px, pour qu'il libère l'accès aux images.

    Si vous survolez ce montage, rien ne se passe; si vous cliquez dessus, le bouton marron clair, qui recouvre l'ensemble, se réduit à 30px par 30px dans l'angle haut gauche et permet de survoler ce qui est dessous; le retour se fait par un clic hors montage.


    Un rond qui devient carré au survol


    Un rond qui se déplace au survol

    <div style="width: 800px; height: 500px; border: 1px solid black; margin: 0px auto; background: coral;">
    <input id="x1" type="text" />
    <p id="x2"><br />Un rond qui devient carr&eacute; au survol</p>
    <p id="x3"><br />Un rond qui se d&eacute;place au survol</p>
    </div>

    <style><!--
    #x1{position:absolute; z-index:5; width:800px; height:500px; border:none; background:rgba(31,205,205,0.3);}
    #x2{position:absolute; z-index:1; width:120px; height:120px; box-shadow:3px 3px 4px black; border-radius:50%; border: 1px solid black; background:yellow; transform:translate(50px,50px); font-size:14px; text-align:center; line-height:20px; transition:all 1s linear;}
    #x3{position:absolute; z-index:1; width:120px; height:120px; box-shadow:3px 3px 4px black; border-radius:50%; border: 1px solid black; background:lime; transform:translate(250px,250px); font-size:14px; text-align:center; line-height:20px; transition:all 1s linear;}
    #x1:focus{width:30px; height:30px;}
    #x2:hover{border-radius:0%;}
    #x3:hover{ width:200px; transform:translate(350px,250px); background:pink;}
    --></style>

    On place ce que l'on veut dans le montage et les éléments sont animés en CSS.