Index

Ajouter un effet au survol de l'image

Yeswiki utilise une bibliothèque css nommée Izmir qui permet d'ajouter facilement des effets au survol d'une image.

1ere étape : insérer une image et ajouter un texte

image undraw_teaching_f1cm.png (86.0kB) — Texte de la vignette apparait au survol de la souris

Code wiki

{{attach file="undraw_teaching_f1cm.png" desc="image undraw_teaching_f1cm.png (86.0kB)" size="medium" class="left" caption="Texte de la vignette apparait au survol de la souris"}}

Lorsque vous ajoutez une image avec le bouton fichier (fonction attach), il est possible de saisir un "texte de la vignette" - il sera visible au survol de l'image. Ce texte apparait dans votre code avec le paramètre caption="mon texte"

2eme étape : paramètres avancés

En éditant le composant attach vous aurez accès à de nouvelles options, notamment dans les paramètres avancés, l'effet izmir permet d'ajouter du style pour l'affichage de votre texte au survol.
La couleur de fond est maintenant présente sur l'ensemble de l'image, le texte est centré.

D'autres options comme l'apparition de bordures ou le zoom sur l'image apportent un dynamisme lors du survol.
A ce jour il semble que texte surgissant et gradient ne fonctionnent pas

3eme étape : personnalisation plus fine

Pour modifier la couleur, il est possible de définir spécifiquement la propriété background-color de l'opbjet figcaption.
ici j'ai ajouté une classe css 'custom-izmir' afin de ne modifier que le 3eme exemple
Code attach avec la classe css ajoutée :

{{attach file="undraw_teaching_f1cm.png" desc="image undraw_teaching_f1cm.png (86.0kB)" size="medium" class="left c4-izmir c4-gradient-top custom-izmir" caption="Texte de la vignette apparait au survol de la souris"}}

Ajout de code css pour modifier la couleur :

""<style>.custom-izmir figcaption{background-color:#ea663c;}</style>""

Remarque : si votre image comporte un fond transparent, vous serez certainement gênés par une couleur de fond bleu appliquée sous votre image, dans ce cas vous pouvez modifier la couleur de fond avec le code css suivant :

.c4-izmir { --primary-color: transparent;}