• Centre de formation Joomla!
    Tutoriels et formation Joomla!
    Apprenez en vous formant à votre rythme, en toute liberté,
    créez votre propre site Web avec Joomla!

Tutoriel Logo Joomla 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

Ajouter un zoom à vos images dans Joomla

Dans le menu de gauche, cliquez sur Templates

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

Ajouter un zoom à vos images dans Joomla

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.

Ajouter un zoom à vos images dans Joomla

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.

Ajouter un zoom à vos images dans Joomla

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
Ajouter un zoom à vos images dans Joomla

Après
Ajouter un zoom à vos images dans Joomla

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

Ajouter un zoom à vos images dans Joomla


 

1 1 1 1 1 1 1 1 1 1 Rating 0.00 (0 Votes)

web-eau.net is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is
used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.