• ZoomA CSS3

     

    On me demande comment faire un agrandissement sur image; les plus jolis codes utilisent un script, (javascript) qui n'ont plus la cote, en raison de certaines failles de sécurité et que des navigateurs ne lisent plus ou ne nous autorisent plus à publier dans nos articles (d'après mes bricolages !).

    Nous avons d'autres outils, les codes CSS3,  moins spectaculaires mais qui peuvent donner de beaux résultats: survolez les exemples ou cliquez sur certains.

    <p>
    <img id="z1" src="http://ekladata.com/8leA-UoLxfs6f6kDP-5eZEM2sOE.jpg">
    </p>
    <style><!--
    #z1{width:200px; height:200px; border-radius:50%; border:2px solid white; box-shadow:3px 3px 6px black; transition:all 1s linear;}
    #z1:hover{width:600px; height:600px; border-radius:0%;}
    --></style>

    <p style="width: 650px; height: 620px; float: left; text-align: center; font-size: 11pt;">code</p>

    <style><!--
    #z2{ position:absolute; transform:translate(0px,100px);width:100px; height:100px; border-radius:50%; border:2px solid white; box-shadow:3px 3px 6px black;}
    #z2a{width:0px; height:0px; transform:translate(320px,300px); border-radius:50%; transition:all 1s linear;}
    #z2:hover ~ #z2a{position:absolute; width:600px; height:600px; transform:translate(120px,0px); border-radius:0%; border:2px solid white; box-shadow:3px 3px 6px black;}
    --></style>

    C'est le principe que vous voyez dans les galeries, que l'on peut modifier au clic.

    Au clic, avec retour par clic, hors vignette.
    <p style="width: 750px; height: 620px; float: left;"><input id="z3" type="text" /> <img id="z3a" src="http://ekladata.com/Q9UpvgwG3ZDifliOX9Ic3DyfxNA.jpg" alt="" /></p>
    <style><!--
    #z3{position:absolute; transform:translate(0px,200px); width:100px; height:100px; border-radius:50%; border:2px solid white; box-shadow:3px 3px 6px black; background:url('http://ekladata.com/Q9UpvgwG3ZDifliOX9Ic3DyfxNA.jpg'); background-size:cover;}
    #z3a{ position:absolute; width:0px; height:0px; transform:translate(320px,300px); border-radius:50%; transition:all 1s linear;}
    #z3:focus ~ #z3a{width:600px; height:600px; transform:translate(120px,0px); border-radius:0%; border:2px solid white; box-shadow:3px 3px 6px black; }
    --></style>

    Dans le premier exemple, nous avons modifié la largeur/hauteur au survol; une autre écriture est possible en modifiant l'échelle (scale).
    Notre montage faisant 600x600px, lui paramétrer une échelle de 0.3 va le réduire à 180x180px; au survol, nous lui redonnons son échelle de 1.
    <p><img id="z4" src="http://ekladata.com/Vo-DELqmICUnq9xSchbsTusKYa0.jpg" alt="" /></p>
    <style><!--
    #z4{border-radius:50%; transform:translate(50px,50px) scale(0.3);border:2px solid white; box-shadow:3px 3px 6px black; transition:all 1s linear;}
    #z4:hover{transform:translate(0px,0px) scale(1); border-radius:0%;}
    --></style>

    <p style="width:620px; height:620px; float:left;"><img id="z5" src="http://ekladata.com/5kZ6Dn1bkpRx-sHN98__cBbSBiw.jpg" alt="" /></p>
    <style><!--
    #z5{border-radius:50%; transform:translate(50px,50px) scale(0.3) rotate(-45deg);border:2px solid white; box-shadow:3px 3px 6px black; transition:all 1s linear;}
    #z5:hover{transform:translate(0px,0px) scale(1) rotate(0deg); border-radius:0%;}
    --></style>
    Nous pouvons donner une ou des animations supplémentaires au survol et ma prochaine page traitera des agrandissements sur des images, placées en fond de boîtes (cadres), ce qui nous permettra d'autres fantaisies !

    ...