Hilfe bei Ausbau eines HTML-/CSS-Schnipsel

  • Hallo liebe Experten,


    ich habe auf der tollen Archivseite littlesnippets.net die Nummer 1067 gefunden und möchte diesen Schnipsel gerne in meine Homepage einbinden. Beim Überfahren mit der Maus (mouseover effect) werden drei Icons eingeblendet. Diese kann man mit einem Link hinterlegen.

    Könnte mir jemand den Code so abändern, dass anstelle eines Links ein Popup Fenster erscheint, das - je nachdem welches Icon gerade mit der Mause angewählt wurde (mouseover) - die Telefonnummer, Adresse bzw EMail anzeigt?


    Leider bin ich noch absoluter Anfänger und weit davon entfernt so etwas einfach umzusetzen... :(

    Hier der Beispiel HTML-Code:


    und hier der Beispiel CSS-Code:


    ich würde mich freuen, wenn mir einer der Expertinnen oder Experten hierbei helfen könnten.

    Liebe Grüße
    Kurtus

  • Ja, so etwas wie eine Sprechblase oder viereckiges Fenster, so dass man beim Überfahren des Icons, mit dem Mauszeiger, sofort die Info angezeigt bekommt.

  • Hallo basti1012,

    vielen Dank für Deine Bemühungen.


    Die erste Variante mit der Sprechblase gefällt mir am Besten. Das war genau das was ich mir vorgestellt habe.

    Muss als absoluter Laie jetzt nur noch herausfinden welche Teile, die zur Sprechblase gehören aus deinem Code ich in die CSS Datei kopieren muss und welche ich in der HTML-Datei zu ergänzen habe.



    Auch an m.scatello herzlichen Dank für den Hinweis.


    Ich habe das mit dem Tooltip mal ausprobiert, allerdings verschwinden das Icon bei mir, wenn ich den div-Container hinzufüge, hier am Beispiel des ersten Icons bei dem der Tooltip "test" erscheinen sollte:


    HTML-Code:

    HTML
    1. <figure class="snip0067 red">
    2. <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample2.jpg" alt="sample8" />
    3. <figcaption>
    4. <h2>Gabriel <span>Lee</span></h2>
    5. <p>I'm a genius, but I'm a misunderstood genius.</p>
    6. <div class="icons"><div class="tooltip"><i class="ion-ios-home"></i><span class="tooltiptext">test</span>
    7. </div><a href="#"><i class="ion-email-unread"></i></a><a href="#"><i class="ion-ios-star"></i></a></div>
    8. </figcaption>
    9. <div class="position">Illustrator</div>
    10. </figure>


    CSS Code:

    Wahrscheinlich mache ich auch hier einen Denkfehler mit meinem Halbwissen.

    Evtl. kann mir da jemand weiterhelfen, wo mein Fehler liegt.


    Vielen Dank!

    Kurtus


    Edit:

    in einer normalen HTML-Datei funktioniert es. allerdings wollte ich es in einem Beitrag in Joomla verwenden.

    Hier verschwindet das Icon...

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von Kurtus ()

  • Konnte das mit dem Tooltip und verschwundenen Icons lösen:


    Ich musste die Angabe opacity: 1;beim .tooltip {hinzufügen, damit ging es auch unter Joomla.


    Danke nochmals für Eure Hilfe!


    Kurtus