Astuces CSS - Miniature et zoom sur grande image en Hover

village-libriste

Résultat obtenu : passer la souris sur l'image


Pour obtenir cet effet, on trouve plusieurs conseils en web-cherchant, et je ne sais plus où j'ai trouvé celui-ci.

Dans le fichier style.css de la skin, ajouter les classes suivantes :


.css_zoom_image { width: 80px; } .img-zoom { position: absolute; width: 0px; -webkit-transition: width 0.3s linear 0s; -moz-transition: width 0.3s linear 0s; -ms-transition: width 0.3s linear 0s; -o-transition: width 0.3s linear 0s; transition: width 0.3s linear 0s; z-index: 10; } .css_zoom_image:hover + .img-zoom { width: 350px; }


Le principe est de n'avoir qu'une seule image, au format le plus grand que l'on souhaite afficher. Dans le html, on affiche l'image en la réduisant à 80 px de large, elle comporte un lien vers l'image en plus grande taille (ici : 350px de large) qui s'affichera en hover de la miniature. Voici le code : remplacer les parenthèses par des caractères  < pour (  et> pour  )


(a href="#") (img class="css_zoom_image" src="/images/village-libriste.jpg" style="float: left; margin: 1%;" /) (img class=" img-zoom" src="/images/village-libriste.jpg" /)





Index |Info | Imprimer | PDF | Permalien

Technique

Installer

Sécuriser

Référencer

Fabriquer le web

adHoc

Astuces CSS

Mail, Webmail, courrier etc ...

Piwigo

Écolibre