Des effets pour afficher du texte au survol d'une photo

🆙 image_hover : Superpose un contenu HTML sur une image avec des effets lors du survol

Cliquer pour lire la documentation

{up image-hover=images/image.jpg | effect=xx}
-- contenu HTML affiché au survol
{/up image-hover}
Voir la démo pour les numéros des effets
@author: Lomart @version: UP-0.9 @license: GNU/GPLv3 @credit: Sanjay Jadon @tags: image
  • image_hover: nom de l'image
  • effect = 11: nom de l'effet à trouver sur le site démo

Style CSS pour le bloc externe

  • id: identifiant
  • class: classe
  • style: style inline

Style CSS pour l'image

  • img-class: classe pour image
  • img-style: style inline pour image

Style CSS pour le contenu HTML

  • text-class: classe pour bloc texte lors survol
  • text-style: style inline pour bloc texte lors survol

Divers

  • css-head (base-css): code css pour le head. ATTENTION [] au lieu de {}
Cornemuse au soleil couchant mini

Effet n° 11

Service temporarily offline, please contact

Action

Cornemuse au soleil couchant mini

Effet n° 12

Service temporarily offline, please contact

Action

Cornemuse au soleil couchant mini

Effet n° 13

Service temporarily offline, please contact

Action

Cornemuse au soleil couchant mini

Effet n° 21

Service temporarily offline, please contact

Action

Cornemuse au soleil couchant mini

Effet n° 22

Service temporarily offline, please contact

Action

Cornemuse au soleil couchant mini

Effet n° 23

Service temporarily offline, please contact

Action

Cornemuse au soleil couchant mini

Effet n° 31

Service temporarily offline, please contact

Action

Cornemuse au soleil couchant mini

Effet n° 32

Service temporarily offline, please contact

Action

Cornemuse au soleil couchant mini

Effet n° 33

Avec le paramétre: text-style=background-color:plum

Action

Cornemuse au soleil couchant mini

Effet n° 41

Service temporarily offline, please contact

Action

Cornemuse au soleil couchant mini

Effet n° 42

Service temporarily offline, please contact

Action

Cornemuse au soleil couchant mini

Effet n° 43

Service temporarily offline, please contact

Action

Cornemuse au soleil couchant mini

Effet n° 51

Service temporarily offline, please contact

Action

Cornemuse au soleil couchant mini

Effet n° 52

Service temporarily offline, please contact

Action

Cornemuse au soleil couchant mini

Effet n° 53

Service temporarily offline, please contact

Action

Cornemuse au soleil couchant mini

Effet n° 61

Service temporarily offline, please contact

Action

Cornemuse au soleil couchant mini

Effet n° 62

Service temporarily offline, please contact

Action

Cornemuse au soleil couchant mini

Effet n° 63

Service temporarily offline, please contact

Action

Cornemuse au soleil couchant mini

Effet n° 71

Service temporarily offline, please contact

Action

Cornemuse au soleil couchant mini

Effet n° 72

Service temporarily offline, please contact

Action

Cornemuse au soleil couchant mini

Effet n° 73

Service temporarily offline, please contact

Action

Cornemuse au soleil couchant mini

Effet n° 81

Service temporarily offline, please contact

Action

Cornemuse au soleil couchant mini

Effet n° 82

Service temporarily offline, please contact

Action

Cornemuse au soleil couchant mini

Effet n° 83

Action

Le shortcode pour la dernière image

{up image-hover=images/image.jpg | effect=83 | text-class=pink | css-head=.pink:before,.pink:after[background-color:pink !important] }
  <h4>Effet n° 83</h4>
  <p>paramétre: css-head=.pink:before,.pink:after[background-color:pink !important]</p>
  <p><a href="#" class="btn">Action</a></p>
{/up image-hover}
image-hover
nom et chemin de l'image
effect
nuléro de l'effet à trouver sur le site démo
class & style
classe et style inline pour bloc externe
img-class & img-style
classe et style inline pour l'image
text-class & text-style
classe et style inline pour bloc texte lors survol
css-head
code css pour le head. ATTENTION [] au lieu de {}
Dans l'exemple, on nomme la classe dans 'text-class' et on la définit dans le head de la page par 'css-head'