Astuces CSS - Miniature et zoom sur grande image en Hover
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="//chronica.chauvigne.info/images/village-libriste.jpg" style="float: left; margin: 1%;" /) (img class=" img-zoom" src="//chronica.chauvigne.info/images/village-libriste.jpg" /)