Vous êtes ici : Accueil / Mode d'emploi / Before - After

Before - After

Publié le 02/02/2021

Mode zen PDF

Citer cet article

Comment faire ?

  • Insérer les 2 images
    • de préférence, il faut respecter cet ordre : ancien > présent
    • ces deux images doivent avoir la classe CSS "photo". On peut le saisir dans le champs de "classe CSS" lors de l'insertion d'image en cliquant sur l'onglet "Avancé/Advanced".
    • elles doivent avoir la même dimension (soit depuis le chargement des images dans le site, soit en paramétrant depuis la proprité d'image)
    • l'emplacement et les noms d'images ne sont pas importants, c'est-à-dire, il n'est pas obligé d'avoir 'avant.jpg', ni 'apres.jpg' comme nom des images
  • Sélectionner les 2 images, cliquer sur l'icône "Créer un nouveau container DIV" > onglet "Avancé/Advanced" > saisir obligatoirement dans le champ Identifiant (Id) "container-beforeAfter"

 

Note: Dans un article, on ne peut avoir qu'une seule fois ce genre de fonctionnalité.

Démo

handle
avant
apres
Pour citer cet article :  

« Before - After », Géoconfluences, février 2021.
https://geoconfluences.ens-lyon.fr/mode-demploi/before-after

Retour en haut