Ich möchte ein Bild aufpoppen lassen - wie geht das?

  • Hallo,

    auf meiner Website Malerei 2000 möchte ich im linksseitigen Menü (screenshot)

    dass beim Überfahren mit der Maus der Textstelle 'das aktuelle Bild - Blaue Formen' dieses Bild aufpoppt. Geht das überhaupt und wenn ja, wie lautet der code dazu?

    framelinks.jpg

  • Ich habe Google bemüht aber nichts brauchbares gefunden, nicht mal Seiten, wo dieser Effekt eingebaut ist.

  • Das man nicht alles sofort bei Google findet liegt daran das man als Anfänger nicht unbedingt die Begriffe kennt ;-)

    Wenn man bei google eingibt

    Zitat

    bild vergrößern maus

    dann schlägt google schon Möglichkeiten vor, da muss man nicht unbedingt die Begriffe kennen.

  • Ich habe mehrere News-Seiten auf meiner eigenen Webseite, hier habe ich bei den Bildern fast das gleiche gebaut.

    Leider sind "fremde Links" nicht gewünscht, und somit möchte ich hier auch meine Seite(n) nicht gerne "bewerben", jedoch kann ich Ihnen gerne den Code mitteilen, mit diesem kann man Bilder vergrößern:



    Wenn fragen sind, gerne her damit, ich bin selbst an CSS interessiert.


    Liebe Grüße, Patrick

    Dieser Beitrag wurde bereits 3 Mal editiert, zuletzt von P.Schmidt ()

  • Ich habe mehrere News-Seiten auf meiner eigenen Webseite, hier habe ich bei den Bildern fast das gleiche gebaut.

    Leider sind "fremde Links" nicht gewünscht, und somit möchte ich hier auch meine Seite(n) nicht gerne "bewerben", jedoch kann ich Ihnen gerne den Code mitteilen, mit diesem kann man Bilder vergrößern:

    Hallo Patrik, die Frage von blaubär war nicht, wie vergrößere ich ein Image durch hovern, sondern dass beim Überfahren mit der Maus der Textstelle 'das aktuelle Bild - Blaue Formen' dieses Bild aufpoppt.

  • Ist aber eine gute Grundlage, um selbst drauf zu kommen. Im Grunde reicht ein kleine Abwandlung:

    HTML
    1. <a class="hover-image" href="">Ein schöner Bild</a>
    2. <img src="blah/foo/bar.jpg" alt="">
    CSS
    1. .hover-image + IMG { display:none; }
    2. .hover-image:hover + IMG { display:inline-block; }

    Positionierung und Styling lasse ich hier der Übersicht halber mal weg, dürfte aber alles problemlos in CSS funktionieren.

  • Hallo Patrik, die Frage von blaubär war nicht, wie vergrößere ich ein Image durch hovern, sondern dass beim Überfahren mit der Maus der Textstelle 'das aktuelle Bild - Blaue Formen' dieses Bild aufpoppt.

    Vielen dank für deine Info, dann habe ich leider etwa falsches verstanden.


    Dann sucht er möglicherweise ein "Tooltipp", mit soetwas habe ich mir eine ganze Bilder-Galerie erstellt, weil ich auf Javascript so gut wie möglich verzichten wollte.


    Mit einem sogenannten CSS-"Tooltip" kann er auch Bilder aufpoppen lassen, diese benötigen kein Javascript, und eignen sich hervorragend für solche Projekte.


    Ich habe mir auch mehrere Dropdown-Menüs mit solchen "Tooltipps" erstellt....


    Gerne nenne ich einen selbsterstellten CSS/Html-Code von einem solchen "Tooltipp", hier ist das Bild schon mit eingebaut und man muss nur noch die URL des Bildes ändern.


    LG, Patrick


    Edit: Hier mein Code des Tooltip-Fenster:


    Dieser Beitrag wurde bereits 3 Mal editiert, zuletzt von P.Schmidt () aus folgendem Grund: Code hinzugefügt!

  • Das mit den Bildgrößen sollte dein zweites Problem sein, denn im Code sind derart viele Fehler, dass du Gefahr läufst, dass bei der Darstellung der Seite überhaupt nichts mehr passt... siehe dazu das Validator-Ergebnis:

    https://validator.w3.org/nu/?d…lerie_hector_haeckel.html

    Rein optisch zu erkennen auch an zB dem horizontalen Scrollbalken und im oberen Bereich an der nach rechts herausragenden Linie.


    Das Problem mit der Bildgröße sollte sich durch die Formatierung 'background-size: contain;' beheben lassen.