Zoom sur une image en css3

 

Dans cette page je vous propose de voir comment on peut faire un zoom sur une image en utilisant uniquement le Css3.
Le fait est que l'on utilise que du css, et que la feuille de style est utilisée dans toutes les pages, pas besoin de s'embarrasser de script javascript et d'image, ce code sera en fait accessible dans n'importe quelle page si on a besoin.

Ci-dessous trois sorte de code html, dont un utilisant le redimensionnement à la volé en php, et placé dans un lien, le second l'image source est placée dans un lien mais redimensionnée en css, tandis que le troisième n'utilise que la balise image. Ces trois exemples sont placés dans un bloc conteneur.

                      <h3>Zoom sur une image en CSS3</h3>
                      <p>Image insérée dans un bloc (div) et placée dans un lien et redimensionnée en php</p>
                        <div class="zoom" id="zoom">
                        <p>
                        <a href="#zoom"><img alt="" <?php fctaffichimage('10.jpg', 50, 50) ?> /></a>
                        </p>
                        </div>
                        <br /><br /><br />
                        <p>Image insérée dans un bloc (div) et placée dans un lien et redimensionnée en css</p>
                        <div class="zoom" id="zoom">
                        <p>
                        <a href="#zoom"><img src="10.jpg" /></a>
                        </p>
                        </div>
                        <br /><br /><br />
                      <p>Image insérée dans un bloc (div) uniquement</p>
                        <div class="pic"> 
                        <img src="10.jpg" alt="img"  />
                        </div>
              

Le code Css ci-dessous fait référence aux codes html. l'agrandissement de l'image est effectuée grâce à la propriétés (scale).

                      .zoom p img{width:10%;height:10%;padding:20px;}
                      .zoom p a{outline:none;}
                      .zoom p a:hover img, .zoom p a:focus img{	
                      -webkit-transform:scale(4);-webkit-transform-origin:top left;-webkit-transition:all 0.7s linear;-webkit-box-shadow:1px 1px 10px dimgray;
                      -moz-transform:scale(4);-moz-transform-origin:top left;-moz-transition:all 0.7s linear;-moz-box-shadow:1px 1px 10px dimgray;
                      -ms-transform:scale(4);-ms-transform-origin:top left;-ms-transition:all 0.7s linear;
                      -o-transform:scale(4);-o-transform-origin:top left;o-transition:all 0.7s linear;
                      transform:scale(4);transform-origin:top left;transition:all 0.7s linear;box-shadow:1px 1px 10px dimgray;}
                      
                      .pic img
                      {
                          width:120px;
                          height:90px;
                          -webkit-transition: all .6s ease-in; /* element qui subit la transition, temps de la transition et fonction de la transition*/
                          -moz-transition: all .6s ease-in;
                          -o-transition: all .6s ease-in;
                          transition: all .6s ease-in;
                      }
                      .pic img:hover
                      {
                          -webkit-transform: scale(4); /*multiplication de la taille de départ x 4*/
                          -moz-transform: scale(4);
                          -o-transform: scale(4);
                          transform: scale(4);
                          -webkit-transform-origin: center center; /*origine de l'animation*/
                          -moz-transform-origin: center center;
                          -o-transform-origin: center center;
                          transform-origin: center center;
                          box-shadow:1px 1px 10px dimgray;
                          -moz-box-shadow:1px 1px 10px dimgray;
                          -webkit-box-shadow:1px 1px 10px dimgray;
                      }
             

La démo utilise les mêmes codes que ceux cités dans les onglets de code.





Ci-dessous le lien vers la démo. Démo