• [HTML & CSS] Faire apparaître du texte au survol d'une image

    Pour faire apparaître du texte au survol d'une image. C'est pas super compliqué une fois qu'on a compris, même si ça peut paraître rebutant la première fois qu'on voit les codes. Il y a une partie CSS et une partie HTLM.

     

     

    PARTIE CSS:

    .NOM DE TON CODE {
        background-color: #ffffff; /*Couleur de fond*/
        height: XXpx; /*hauteur de ton image*/
        opacity: 0; /*pour qu'on ne le voit pas, tant que ce n'est pas survollé*/
        position: absolute;
        width: XXpx; /*largeur de ton image*/
        transition: all 0.6s ease; /*temps d'apparition au survol*/
    }

    #image:hover .NOM DE TON CODE {
        height: XXpx; /*hauteur de ton image*/
        opacity: 0.9; /*opicité du fond lorsqu'il apparaît, si y a 0.9 c'est qu'il est un peu transparent*/
        width: XXpx; /*largeur de ton image*/
    }

     

    Alors, le NOM DE TON CODE, faut le remplacer par une truc du style "suvolimage" ou "survol1" (sans espace) pour créer une balise il me semble. Ensuite, une fois cette balise créée, on la rappelle pour l'utiliser sur une image survolée.

     

     

    PARTIE HTML

    <div id="image">
    <div class="NOM DE TON CODE">
    <p><span>TON TEXTE<br /><br /></div>
    </div>
    <p style="text-align: center;"><img src="URL DE TON IMAGE" alt=" " /></p>

     

    Du coup, y a rien de  bien compliqué ici. Comme dit plus haut, le NOM DE TON CODE constitue une balise. Et si tu veux utiliser cette balise, il faut que tu la rappelle en la nommant dans ton code HTLM. Attention, cette balise ne peut être utiliser que pour des images ayant les mêmes dimensions. Si tu veux refaire le même effet mais avec une image ayant d'autres dimensions il faut que tu refasses ce code, mais cette fois-ci en nommant ton code différemment.

     

    (+) au cas où, pour ceux qui se demande comment se nomme le code, en fait, il faut remplacer le NOM DE TON CODE par ce que vous voulez afin que vous puissiez reconnaître le code dans votre CSS.

     

    (Ah et si jamais le texte est plus long que la hauteur de l'image bah tu mets simplement une scrollbar.)

     

    Le code n'est pas de moi, il est de tumblr (fin, il est dispo sur un plein de blog codage sur tumblr quoi). Je me suis juste contentée d'expliquer.


  • Comments

    1
    Friday 26th June 2015 at 19:19

    Merci beaucoup !! Y'a un bémol, le nom du code c'est quoi précisément x) ?

    2
    Friday 26th June 2015 at 19:20

    De rien! :3

    Ah mince, j'ai peut être mal expliqué, en fait le nom du code, c'est toi qui le choisi, faut juste que il n'y ai pas d'espace. x)

    3
    Friday 26th June 2015 at 19:25

    Oh je vois ! Je vais faire un test tout de suite :3

    4
    Friday 26th June 2015 at 21:56

    Du coup ça y est? C'est bon? :3

    5
    Friday 26th June 2015 at 22:20

    J'ai un beug majeur sur Ekla $^$

    http

    Personne n'a l'air de répondre donc je peut même pas tester x)

    6
    Friday 26th June 2015 at 23:33

    Oui, tu m'avais dit. C'est toujours pas réglé alors.. :c

    Hm, t'as déjà essayé de voir si ça venait de ton ordi? Genre nettoyer vite fait avec un logiciel, peut être que ça vient de là. Sinon, il faut attendre une réponse de Stéphanie. :/

    7
    Saturday 27th June 2015 at 00:29

    Oui, j'essaie de trouver une solution, mais c'est pénible de devoir attendre :(

    8
    Saturday 27th June 2015 at 10:33

    T'as toujours pas eu de réponse? x:

    9
    Saturday 27th June 2015 at 11:14

    Coucou :3

    Merci pour le code, je le cherchais depuis pas mal de temps!

    Par contre, es-ce que tu saurais le code pour mettre une srollbar au survol des images?

    Merci d'avance!

    10
    Saturday 27th June 2015 at 11:31

    Coucou!

    De rien, ce n'est rien. :3

    Pour une scrollbar, tu rentres simplement ce code à la place de TON TEXTE. Et après tu écris.

    <div style="width: LARGEURpx; height: HAUTEURpx; overflow-x: auto; overflow-y: auto;">CONTENU</div>

    Voilàà, de rien!

    11
    Saturday 27th June 2015 at 11:32

    Génial, merci >w<

    12
    Sunday 28th June 2015 at 23:37

    Trop bien comme codage, merci Fafa :D

    13
    Monday 29th June 2015 at 19:06

    Cool, contente que ça serve et que ce soit clair. :3

    nan mais en vrai, je sais pas comment les gens le trouvent, je l'ai supprimé de mes activité e_e

    14
    Monday 29th June 2015 at 21:01

    x'DD

    fabule-ation.ek.la/recent

    8DD

    15
    Tuesday 30th June 2015 at 18:50

    La fourberie. Je me suis faite avoir par un url. xD

    16
    Tuesday 30th June 2015 at 21:23

    x'DD Les url envahiront... ton blog 8D

    17
    Wednesday 1st July 2015 at 17:16

    Omg. Illuminati.

    18
    Monday 6th March 2017 at 21:28

    Coucou, je voulais savoir s'il te plaît, si il était possible d'avoir un texte (un texte lien qui amène donc à une autre page) mais avec une image au survol ? Enfin si ça existe déjà...

    • Voir les réponses
    19
    Monday 10th April 2017 at 22:58

    Fabule dans ton code tu a oublié au touuut début le code CSS le point avant NOM MINCHIN CHOSE 

    20
    Tuesday 18th April 2017 at 21:04

    Je te le prends s'il te plait, merci :3 

    21
    Tuesday 17th December 2019 at 20:37

    J'aimerais mette l'image en lien tout en gardant l'effet sur l'image, comment faire svp?

    Suivre le flux RSS des commentaires


    Add comment

    Name / User name:

    E-mail (optional):

    Website (optional):

    Comment: