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

Lorem ipsum dolor sit amet,

Action

Cornemuse au soleil couchant mini

Effet n° 12

Lorem ipsum dolor sit amet,

Action

Cornemuse au soleil couchant mini

Effet n° 13

Lorem ipsum dolor sit amet,

Action

Cornemuse au soleil couchant mini

Effet n° 21

Lorem ipsum dolor sit amet,

Action

Cornemuse au soleil couchant mini

Effet n° 22

Lorem ipsum dolor sit amet,

Action

Cornemuse au soleil couchant mini

Effet n° 23

Lorem ipsum dolor sit amet,

Action

Cornemuse au soleil couchant mini

Effet n° 31

Lorem ipsum dolor sit amet,

Action

Cornemuse au soleil couchant mini

Effet n° 32

Lorem ipsum dolor sit amet,

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

Lorem ipsum dolor sit amet,

Action

Cornemuse au soleil couchant mini

Effet n° 42

Lorem ipsum dolor sit amet,

Action

Cornemuse au soleil couchant mini

Effet n° 43

Lorem ipsum dolor sit amet,

Action

Cornemuse au soleil couchant mini

Effet n° 51

Lorem ipsum dolor sit amet,

Action

Cornemuse au soleil couchant mini

Effet n° 52

Lorem ipsum dolor sit amet,

Action

Cornemuse au soleil couchant mini

Effet n° 53

Lorem ipsum dolor sit amet,

Action

Cornemuse au soleil couchant mini

Effet n° 61

Lorem ipsum dolor sit amet,

Action

Cornemuse au soleil couchant mini

Effet n° 62

Lorem ipsum dolor sit amet,

Action

Cornemuse au soleil couchant mini

Effet n° 63

Lorem ipsum dolor sit amet,

Action

Cornemuse au soleil couchant mini

Effet n° 71

Lorem ipsum dolor sit amet,

Action

Cornemuse au soleil couchant mini

Effet n° 72

Lorem ipsum dolor sit amet,

Action

Cornemuse au soleil couchant mini

Effet n° 73

Lorem ipsum dolor sit amet,

Action

Cornemuse au soleil couchant mini

Effet n° 81

Lorem ipsum dolor sit amet,

Action

Cornemuse au soleil couchant mini

Effet n° 82

Lorem ipsum dolor sit amet,

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'