image-hover ~ affichage texte avec effets lors survol

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

➠ image_hover : affiche avec des effets un contenu HTML sur une image lors du survol DEMO
{up imagehover=images/image.jpg | effect=xx}
-- contenu HTML affiché au survol
{/up imagehover}
author Lomart version 1.0 - juillet 2017 license GNU/GPLv3 credit Sanjay Jadon
  • image_hover: nom de l'image
  • effect=11: nom de l'effet à trouver sur le site démo
  • class: classe pour bloc externe
  • style: style inline pour bloc externe
  • img-class: classe pour image
  • img-style: style inline pour image
  • text-class: classe pour bloc texte lors survol
  • text-style: style inline pour bloc texte lors survol
  • css-head: 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

    paramétre: css-head=.pink:before,.pink:after[background-color:pink !important]

    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'