Tutoriel Joomla

Ajoutez un effet zoom à vos images

Pour mettre en valeur une image dans un article, il peut être judicieux d'utiliser certaines options graphiques telles que l'effet zoom au survol de la souris. Afin de ne pas alourdir le site, il est préférable alors de recourir aux classes CSS qui sont supportées par tous les navigateurs modernes. Nous allons voir au travers de ce tutoriel comment ajouter un effet zoom sur les images de votre site Joomla.

Table des matières
- Le code
- La mise en oeuvre

Le code

Pour commencer, ouvrez le panneau d'administration de votre site Joomla.
Ouvrez ensuite Extensions puis Templates

Dans le menu de gauche, cliquez sur Templates

Dans la liste des templates présents sur votre site, cliquez sur celui de votre choix.

Dans la colonne de gauche sont affichés les fichiers du template que vous venez de sélectionner.

Cliquez sur CSS puis sur template.css.

Dans la partie droite de l'écran, copiez/collez les lignes suivantes :

/* zoom images */

img.zoom
{
  transition-property: all;
  transition-duration: 0.4s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

img.zoom:hover
{
  transform: rotate(0deg) scale(1.15);
}

Ici, nous avons défini un zoom de 15% grâce à la valeur scale. Vous pouvez modifier cette valeur, si vous le souhaitez.
N'oubliez surtout pas d'enregistrer votre saisie et de fermer le fichier ensuite.

Dans la mesure du possible, privilégiez l'ajout de ce code dans le fichier custom.css si votre template en dispose.

La mise en oeuvre

Ouvrez maintenant Contenu dans le menu supérieur du panneau d'administration. Puis, ouvrez ou créez un article et ajoutez-y du texte et une image.

Dans l'éditeur de texte, repérez le symbole <> puis cliquez dessus.
Dans la fenêtre popup qui s'ouvre, nous allons ajouter la syntaxe class="zoom" à la balise image pour obtenir notre effet zoom.

Avant

Après

Enregistrez votre saisie.
Affichez maintenant votre article en frontend et passez votre souris sur l'image :