Support » Allgemeine Fragen » Overlay Bild für Menu Item

  • Hallo,

    ich möchte beim Hover über einen Eintrag im Hauptmenu ein Bild anzeigen. Wie das geht, seht Ihr hier (einfach im Hauptmenu mit der Maus drüberfahren):
    https://bioenergetik-in-berlin.de

    Diese Seite soll nach WP migriert werden, ich verwende das Hueman Theme. Um das mit dem Overlay zu erreichen, habe ich eine Custom CSS-Klasse overlay definiert:

    .overlay a:hover {
    	position: relative;
    	display: block;
    	z-index:5000;
      background: url("http://wp.bioenergetik-in-berlin.de/wp-content/uploads/2020/01/Ralf-Mannhart.jpg") no-repeat !important;
    }

    Die Klasse wird dann im Menü-Editor beim jeweiligen Menu-Eintrag angegeben.

    Problem: das Overlay-Bild wird in der Größe durch die Ränder des Menus beschnitten, das kann man beim Menu-Eintrag „Ralf Mannhart“ nachvollziehen.

    Hat jemand eine Idee, wie ich es erreichen kann, dass das Overlay-Bild korrekt angezeigt wird?

    Gruß 🙂

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 3 Antworten - 1 bis 3 (von insgesamt 3)
  • Was du da schreibst, passt nicht zu der Website, deren URL du angegeben hast. Dort gibt es im Quelltext des HTML-Dokuments keine CSS-Klasse .overlay und scheinbar wird auch eine CSS-Klasse per JavaScript geändert …

    Gurndsätzlich bekommst du WordPress, Themes und Plugins kostenlos zur Verfügung gestellt, kannst sie nutzen wie du möchtest und auch verändern – das setzt aber gute Grundkenntnisse in PHP, HTML, CSS und ggf. JavaScript voraus, die wir hier nicht vermitteln können. Für Fragen zu CSS gibt es sicher geeignetere Foren.

    Tipp: background-size: contain – mehr Infos unter https://www.w3schools.com/cssref/css3_pr_background-size.asp

    Da ist wohl ein Missverständnis. Die Seite für die ich Hilfe benötige, ist http://wp.bioenergetik-in-berlin.de. Dort habe ich eine CSS-Klasse overlay im CSS-Editor angelegt.

    Die alte Seite ist http://bioenergetik-in-berlin.de. Da gibt es diese CSS-Klasse nicht.

    Trotzdem danke für den Hinweis, dass für CSS-Probleme ein anderes Forum passender ist.

    Hm, sorry, da hab ich wohl die falsche Website angeschaut.

    Probier mal etwas in Richtung

    overlay a:hover {
        position: relative;
        display: block;
        z-index: 5000;
        background-image: url(http://wp.bioenergetik-in-berlin.de/wp-content/uploads/2020/01/Ralf-Mannhart.jpg) !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
    
    }

    (das !important ist extrem unschön – geht sicher besser, wenn du den Selektor präziser benennst)

    aber wie gesagt: eigentlich ist das hier off topic.

Ansicht von 3 Antworten - 1 bis 3 (von insgesamt 3)