Description d'une image

[Algeriyad]

Bonjour,

J'ai moi-même supprimé le message qui était à l'intérieur. En fait, sur le message d'accueil (en haut), je voudrais mettre une image pour dire que je suis le fondateur. Mais, en passant la souris dessus, je voudrais qu'une petit page apparaisse avec quelques descriptions sur moi.
J'espère avoir été clair, merci de m'aider

[tupac]

Bonsoir

Il s"agit d'une infobulle.

Placer ce code dans votre page d'accueil.

Code:

<span class="infobulle">
<!-- image ou l'on passe le curseur -->
    <img src="http://i45.servimg.com/u/f45/15/55/14/56/zzzzzw27.jpg" />
<span>
<!-- bulle qui apparait -->
<center><i>Mickey</i><br><img src="http://i45.servimg.com/u/f45/15/55/14/56/zzzzvf11.jpg" width="160" height="90"/><br><a href=" URL ICI ">Profil</a></span>

Puis celui-ci dans votre feuille de style css.

Code:

.infobulle{
    position: relative;
    z-index: 0;
    margin: 10px;      /* marge entre chaque infobul */
}

.infobulle:hover{ z-index: 50;}
.infobulle span{  position: absolute; visibility: hidden; }

/* image dans la bulle */

.infobulle span img{
    border: 4px outset #FFFF00;      /* cadre de l'image ou l'on passe le curseur */
    background-color: #884DA7;      /* fond image ou l'on passe le curseur */
    padding: 4px;
}

/* cadre et fond bulle  */

.infobulle:hover span{
    visibility: visible;
    top: 0px;            /* marge haut bulle par rapport a l image */
    left: -50px;            /* marge droite et gauche bulle par rapport a l image */
    width: auto;              /* largeur bulle automatique */
    color:#FFFFFF;     
    font-size: 13px;        /* taille texte */
    font-family: Palatino, time new roman, serif;      /* police */
    background-color: #000;        /* fond bulle */
    border: 10px outset #fff;        /* cadre bulle */
    -moz-border-radius: 12px;      /* arrondi pour les navigateurs */
    -webkit-border-radius: 12px;
    border-radius: 12px;
    padding: 5px;
}
.infobulle a{ color:#FFFFFF; }        /* lien profil */
.infobulle a:hover{ color:#FFFF00; }      /* lien profil au survol */

[Algeriyad]

Merci, c'est vraiment sympa !

J'aimerai rajouter un effet. Quand je passe ma souris, j'aimerai que l'infobulle s'agrandisse petit à petit. Est-ce possible ?

[tupac]

Bonjour

Bien sur, c'est un effet de transition, toujours en css.

Le html.

Code:

  <div class="infobulle-trans">
        <span class="img_bulle">
<img src="http://i45.servimg.com/u/f45/15/55/14/56/zzzz711.png" style="width: 50px; height: 50px; " />

<span class="infos">Texte  Texte Texte Texte Texte Texte Texte Texte  Texte Texte Texte Texte Texte Texte Texte  Texte Texte Texte Texte Texte Texte Texte  Texte Texte Texte Texte Texte Texte Texte  Texte Texte Texte Texte Texte Texte <br />
<center><a href="url-profil" target="_blank">Profil</a></center>
</span></span>

Le css a placer dans votre feuille de style.

Code:

    /* image */
.img_bulle img{
    -moz-border-radius:5px;        /* arrondi image */
    -webkit-border-radius:5px;
    border-radius:5px;

    -moz-opacity:.3;
    -webkit-opacity:.3;
    -khtml-opacity:.3;
    opacity:.3;
    -ms-filter:alpha(opacity=30);
    filter:alpha(opacity=30);
    border: 2px solid #000;    /* cadre image */
}

      /* transition */
.img_bulle img:hover{
    -moz-transition:opacity .3s ease-in;
    -webkit-transition:opacity .3s ease-in;
    -htm-transition:opacity .3s ease-in;
    -o-transition:opacity .3s ease-in;
    transition:opacity .3s ease-in;

    -moz-opacity:1;
    -webkit-opacity:1;
    -khtml-opacity:1;
    opacity:1;
    -ms-filter:alpha(opacity=100);
    filter:alpha(opacity=100);
}

      /* bulle qui apparait */
.infobulle-trans span.infos{
    -moz-border-radius:3px;        /* arrondi bulle */
    -webkit-border-radius:3px;
    border-radius:3px;

    color:#cecece;    /* couleur texte bulle */
    text-align:center;
    border: 4px solid #000;    /* cadre bulle */
    background:#4E3D28;
    width:130px;        /* largeur bulle */
    padding:4px;
}

/* fond */
.infobulle-trans .img_bulle span.infos{
    -moz-opacity:.0;
    -webkit-opacity:.0;
    -khtml-opacity:.0;
    opacity:.0;
    -ms-filter:alpha(opacity=0);
    filter:alpha(opacity=0);

    -moz-transition:all .25s;
    -webkit-transition:all .25s;
    -ms-transition:all .25s;
    -o-transition:all .25s;
    transition:all .25s;
    -moz-transform:scale(0) rotate(-12deg);
    -webkit-transform:scale(0) rotate(-12deg);
    -o-transform:scale(0) rotate(-12deg);
    transform:scale(0) rotate(-12deg);

    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    margin-left:-50px;
    margin-top:42px;
    position:absolute;
}

.infobulle-trans .img_bulle:focus span.infos,.infobulle-trans .img_bulle:hover span.infos{
    -moz-opacity:1;
    -webkit-opacity:1;
    -khtml-opacity:1;
    -o-opacity:1;
    opacity:1;
    filter:alpha(opacity=100);
    -ms-filter:alpha(opacity=100);

    -moz-transform:scale(1) rotate(0);
    -webkit-transform:scale(1) rotate(0);
    -khtml-transform:scale(1) rotate(0);
    -o-transform:scale(1) rotate(0);
    transform:scale(1) rotate(0);
}

.infos a{ color:#fff; }
.infos a:hover{ color:#ffff00; }

[Algeriyad]

Merci beaucoup !

Je viens de créer un codecss:

Code:

#hdebut1
{
    text-shadow: 2px 2px 4px maroon;
}

Ensuite j'ai mis à la place de TEXTE: <hdebut1>Fondateur</hdebut1>
Mais le problème, c'est que l'écriture ne veut pas changer. Help me please

[Xibition]

Bonjour, essayez plutot ceci :

Code:

<span class="hdebut1">Fondateur</span>

Et dans le css :

Code:

.hdebut1{
  text-shadow: 2px 2px 4px maroon;
}

[Algeriyad]

Merci pour votre aide à tous, je vais maintenant pouvoir faire ça sans problème !