Before - After
Publié le 02/02/2021
Mode zenComment 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
Pour citer cet article :
« Before - After », Géoconfluences, février 2021.
https://geoconfluences.ens-lyon.fr/mode-demploi/before-after
