Fenêtre popup qui ne s'affiche pas comme désiré

[frangegars]

Bonjour ! J'ai trouvé le tutoriel suivant pour faire apparaitre une fenêtre popup lorsque l'on passe la souris sur un lien :ICI.

Seulement voilà, lorsque j'insère le code sur mon forum, il y a bien un popup qui s'ouvre, mais il n'est ni transparent, ne s'ouvre pas en faisant une "rotation" et ne met pas 25 seconde à s'ouvrir. Je ne comprends pas pourquoi. Voici le code que j'ai mis sur ma feuille CSS :

Code:

a:focus{
    background:#000000;
    box-shadow:0 1px 0 #000000;
}

a:hover span {
  transform:scale(1) rotate(0);
  opacity:1;
}
 
a:focus span{
    transform:scale(1) rotate(0);
  opacity:1;
}

a span{
    position:absolute;
margin-top:23px;
    margin-left:-35px;
  color:#000000;
    background:#ffffff;
    padding:15px;
    border-radius:3px;
    box-shadow:0 0 2px #000000;
  transform: scale (0) rotate(-12deg);
  transition: 25s;
  opacity:0;
}

et voici le code HTML utilisé (en l'occurrence j'aimerais que le popup s'affiche au passage de la souris sur une image et non un lien à proprement dit) :

Code:

<p><a href="#"><img src="http://i49.tinypic.com/hx9r9t.gif"><span>I'm a popup...</span></a>
</p>

J'ai supprimé les parties :

Code:

a{
    color:#ccc;
    text-shadow:0 -1px 0 black;             
}
a:hover {
    background:rgba(0,0,0,.4);
    box-shadow:0 1px 0 rgba(255,255,255,.4);
}

car après tous les liens de mon forum se voyaient entouré d'une ombre et d'un carré noir au passage de la souris.

Voilà, en espérant que vous pourrez m'aider, je vous remercie d'avance

[tupac]

Bonjour

Essayer avec les codes suivants.

Code:

 <section id="article34" class="crayon article-css-34 demoTime">
          <p><a href="#">Hover me !<span>Hello. I’m a popup...</span></a></p>
 </section>

Le css

Code:

#article34 a span{
position:absolute;
padding:15px;
margin-top:23px;
margin-left:-35px;
background:rgba(0,0,0,.9);
opacity:0;
color:#09C;
/*transform*/
-webkit-transform:scale(0) rotateZ(-12deg);
  -moz-transform:scale(0) rotate(-12deg);
    -ms-transform:scale(0) rotateZ(-12deg);
    -o-transform:scale(0) rotate(-12deg);
        transform:scale(0) rotateZ(-12deg);
/*transition*/
-webkit-transition:all .25s;
  -moz-transition:all .25s;
    -ms-transition:all .25s;
    -o-transition:all .25s;
        transition:all .25s;
/*border-radius*/
-webkit-border-radius:3px;
  -moz-border-radius:3px;
        border-radius:3px;
/*box-shadow*/
-webkit-box-shadow:0 0 2px rgba(0,0,0,.5);
  -moz-box-shadow:0 0 2px rgba(0,0,0,.5);
        box-shadow:0 0 2px rgba(0,0,0,.5);
}
#article34 a:hover span,#article34 a:focus span{
opacity:1;
/*transform*/
-webkit-transform:scale(1) rotateZ(0);
  -moz-transform:scale(1) rotate(0);
    -ms-transform:scale(1) rotateZ(0);
    -o-transform:scale(1) rotate(0);
        transform:scale(1) rotateZ(0);
}

#article34 a span::before{
content:'';
position:absolute;
top:-6px;
left:10px;
width:0;
height:0;
border-bottom:6px solid rgba(0,0,0,.9);
border-left:6px solid transparent;
border-right:6px solid transparent;
}

[frangegars]

ça fonctionne ! Merci mille fois !!
Par contre, pour agrandir la taille de la case, je dois modifier quelles valeurs ? Je ne trouve pas de "height" ou de "width"

[Pinguino]

ça fonctionne ! Merci mille fois !!
Par contre, pour agrandir la taille de la case, je dois modifier quelles valeurs ? Je ne trouve pas de "height" ou de "width"

Bonjour,


Ligne 45 et 46 :

Code:

        #article34 a span{
        position:absolute;
        padding:15px;
        margin-top:23px;
        margin-left:-35px;
        background:rgba(0,0,0,.9);
        opacity:0;
        color:#09C;
        /*transform*/
        -webkit-transform:scale(0) rotateZ(-12deg);
          -moz-transform:scale(0) rotate(-12deg);
            -ms-transform:scale(0) rotateZ(-12deg);
            -o-transform:scale(0) rotate(-12deg);
                transform:scale(0) rotateZ(-12deg);
        /*transition*/
        -webkit-transition:all .25s;
          -moz-transition:all .25s;
            -ms-transition:all .25s;
            -o-transition:all .25s;
                transition:all .25s;
        /*border-radius*/
        -webkit-border-radius:3px;
          -moz-border-radius:3px;
                border-radius:3px;
        /*box-shadow*/
        -webkit-box-shadow:0 0 2px rgba(0,0,0,.5);
          -moz-box-shadow:0 0 2px rgba(0,0,0,.5);
                box-shadow:0 0 2px rgba(0,0,0,.5);
        }
        #article34 a:hover span,#article34 a:focus span{
        opacity:1;
        /*transform*/
        -webkit-transform:scale(1) rotateZ(0);
          -moz-transform:scale(1) rotate(0);
            -ms-transform:scale(1) rotateZ(0);
            -o-transform:scale(1) rotate(0);
                transform:scale(1) rotateZ(0);
        }
       
        #article34 a span::before{
        content:'';
        position:absolute;
        top:-6px;
        left:10px;
        width:0;
        height:0;
        border-bottom:6px solid rgba(0,0,0,.9);
        border-left:6px solid transparent;
        border-right:6px solid transparent;
        }

Cordialement,

[frangegars]

Ha voilà, aveugle que je suis >< !!

Merci beaucoup pour cette aide précieuse !

Bonne fin de journée