Hallo Zusammen,
auf http://www.quality-lifestyle.de/team/ hab ich bei den Titeln jeweils auch die Zertifikate eingefügt, welche als Info box bei einem Mousover eingeblendet werden.
Leider erscheint bei einem Mouseover zusätzlich zu dem gewünschten Info-Bild ein fünf Zentimeter langer dicker Streifen, welchen ich als störend empfinde. Weiss einer wie man diesen weg bekommt?
Der css Code Lautet
Code
a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;}
a.tooltip span {
z-index:10;display:none; padding:14px 20px;
margin-top:-30px; margin-left:28px;
width:300px; line-height:16px;
}
a.tooltip:hover span{
display:inline; position:absolute; color:#004CA0;
border:1px solid #004CA0; background:#F2F2F2;}
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
/*CSS3 extras*/
a.tooltip span
{
border-radius:4px;
box-shadow: 5px 5px 8px #CCC;
}und wir bspw. eingebunden mit
Code
<a href="#" class="tooltip">Personal und Business Coach (zertifiziert)<span><img class="callout" src="http://www.quality-lifestyle.de/wp-content/uploads/2015/08/callout1.jpg" /><img src="http://www.quality-lifestyle.de/wp-content/uploads/2015/08/Gregor_Wojtowicz_Personal_Business_Coach.jpg" style="float:right;" /></span></a>Vielen Dank und viele Grüße,
Gregor