Contao Konferenz & College 2019 in Duisburg - JETZT TICKET SICHERN!
Ergebnis 1 bis 26 von 26

Thema: Hover-Effekt mit CSS-Code "transition" und Background-Image

  1. #1
    Contao-Nutzer
    Registriert seit
    07.06.2016.
    Beiträge
    99

    Standard Hover-Effekt mit CSS-Code "transition" und Background-Image

    Hallo Leute,

    habe grade ein Problem wofür ich sowohl hier als auch sonst irgendwo im Netz keine Antwort finde.

    Es geht, wie in dem Thread-Titel erwähnt, darum, dass ich einen Link mit einem Hover-Effekt + Background-Image
    mit dem CSS-Code "transition" mit einem sanften übergang einblenden lassen möchte.

    Allerdings will die Einblendung mit Hintergrundbild nicht funktionieren. Nur die Schrift blendet langsam ein und wenn ich
    statt der Hintergrundgrafik nur eine Farbe benutze funktioniert das auch...Das Hintergrundbild will nicht "faden". :/

    Hier einmal der Code:

    Code:
    #mod_customnav a {
        color: #807767;
        display: block;
        font-family: Helvetica;
        font-style: italic;
        letter-spacing: 1px;
        margin: 5px 2.5px;
        padding-left: 20%;
        padding-right: 20%;
        text-align: center;
        text-decoration: none;
        transition: all 1000ms ease 0s;
    }
    Würde mich freuen wenn mir da jemand helfen kann!

    Danke im Vorraus

    Ben

  2. #2
    Contao-Nutzer Avatar von Exzentrik
    Registriert seit
    23.05.2012.
    Beiträge
    38

    Standard

    Das ist ja nur der halbe Code. Wo ist denn die Definition für den hover-effekt?

  3. #3
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    20.740
    User beschenken
    Wunschliste

    Standard

    Background Images unterstützen keine Transition, zumindest nicht so wie du dir das vorstellst. Du könntest das was du vorhast aber wahrscheinlich mit den Pseudo Elementen before und after erreichen.

  4. #4
    Contao-Fan
    Registriert seit
    03.01.2012.
    Beiträge
    488

    Standard

    Kannst du es etwas genauer erklären?

    Du möchtest einen Link (der eine Hintergrundgrafik hat) einblenden lassen, sobald du über ein Element (welches?) fährst?

    Sehe ich eigentlich keine Probleme bei. Die Frage ist, mit welcher Eigenschaft du es einblenden möchtest, z.B. mit opacity. Außerdem hast du 0s angegeben und davor 1000ms, ich glaube da ist was nicht ganz richtig. Die Shorthand Schreibweise besteht eigentlich nur aus der CSS-Eigenschaft, der Dauer und der Übergangsart.
    Geändert von dazzle89 (07.04.2017 um 10:03 Uhr)

  5. #5
    Contao-Nutzer
    Registriert seit
    07.06.2016.
    Beiträge
    99

    Standard

    Zitat Zitat von Exzentrik Beitrag anzeigen
    Das ist ja nur der halbe Code. Wo ist denn die Definition für den hover-effekt?
    Naja "a:hover" brauch ja nicht mit "transition" angesprochen werden, das brauch nur das "a"-Element. Aber hier nochmal für dich:

    Code:
    #mod_customnav a:hover {
        text-align:center;
        background-image:url("files/tischlerweiss/bghover.png");
        background-repeat:no-repeat;
        text-decoration:none;
        color:#fff;
    }


    Zitat Zitat von Spooky Beitrag anzeigen
    Background Images unterstützen keine Transition, zumindest nicht so wie du dir das vorstellst. Du könntest das was du vorhast aber wahrscheinlich mit den Pseudo Elementen before und after erreichen.
    Danke für den Hinweis. Aber ich weiss nicht wie ich das mit before und after machen soll.


    Zitat Zitat von dazzle89 Beitrag anzeigen
    Kannst du es etwas genauer erklären?

    Du möchtest einen Link (der eine Hintergrundgrafik hat) einblenden lassen, sobald du über ein Element (welches?) fährst?

    Sehe ich eigentlich keine Probleme bei. Die Frage ist, mit welcher Eigenschaft du es einblenden möchtest, z.B. mit opacity. Außerdem hast du 0s angegeben und davor 1000ms, ich glaube da ist was nicht ganz richtig. Die Shorthand Schreibweise besteht eigentlich nur aus der CSS-Eigenschaft, der Dauer und der Übergangsart.
    Ja richtig, ich möchte einen Navigationslink mit Hintergrundbild einblenden lassen.
    0s und 1000ms ist aber schon völlig in ordnung. Wie ich eingangs erwähnte funktioniert dieser Transition-Effekt ja Bei Schrift und CSS-basierter Hintergrundfarbe.
    Wie Spooky schon sagte unterstützen Background-Images keine Transition...

    Mit welcher Eigenschaft ich es letztendlich einblenden möchte ist eigentlich nicht wichtig, hauptsache es wird langsam eingeblendet.

    Wie müsste ich den opacity definieren für das Element mit dem Background-Image?

    Danke schonmal für die Antworten!

    Greetz

  6. #6
    Contao-Fan
    Registriert seit
    03.01.2012.
    Beiträge
    488

    Standard

    Gib dem Link opacity: 0 und beim Hover opacity: 1

  7. #7
    Contao-Nutzer
    Registriert seit
    07.06.2016.
    Beiträge
    99

    Standard

    Zitat Zitat von dazzle89 Beitrag anzeigen
    Gib dem Link opacity: 0 und beim Hover opacity: 1
    Habe verpeilt zu erwähnen, das der Navigations-Link Schrift enthält, diese soll natürlich nicht betroffen sein, bzw. vorher sichtbar bleiben!
    Daher funktioniert das mit opacity so nicht.

  8. #8
    Contao-Fan
    Registriert seit
    03.01.2012.
    Beiträge
    488

    Standard

    Nicht die beste Lösung auf die Schnelle aber du kannst es ungefähr so machen:

    Zuerst brauchst du innerhalb vom <a> noch ein <span>, hoffe das kriegst du irgendwie hin. Also etwa so:

    HTML-Code:
    <a href=""><span>Hier der Text</span></a>
    Dem <a> musst du position: relative; geben.

    Dazu folgende Anweisungen:

    Code:
     #mod_customnav a span {
    	   position: relative;
       }
        
        #mod_customnav a::before {
    	    content: "";
    	    display: block;
    	    position: absolute;
    	    top: 0;
    	    left: 0;
    	    width: 100%;
    	    height: 100%;
    	    z-index: 0;
    	    opacity: 0;
                transition: all 1000ms ease;
    	    background: url("deine-grafik.png");
        }
        
        #mod_customnav a:hover::before {
    	    opacity: 1;
        }

  9. #9
    Contao-Nutzer
    Registriert seit
    07.06.2016.
    Beiträge
    99

    Standard

    Zitat Zitat von dazzle89 Beitrag anzeigen
    Nicht die beste Lösung auf die Schnelle aber du kannst es ungefähr so machen:

    Zuerst brauchst du innerhalb vom <a> noch ein <span>, hoffe das kriegst du irgendwie hin. Also etwa so:

    HTML-Code:
    <a href=""><span>Hier der Text</span></a>
    Dem <a> musst du position: relative; geben.

    Dazu folgende Anweisungen:

    Code:
     #mod_customnav a span {
    	   position: relative;
       }
        
        #mod_customnav a::before {
    	    content: "";
    	    display: block;
    	    position: absolute;
    	    top: 0;
    	    left: 0;
    	    width: 100%;
    	    height: 100%;
    	    z-index: 0;
    	    opacity: 0;
                transition: all 1000ms ease;
    	    background: url("deine-grafik.png");
        }
        
        #mod_customnav a:hover::before {
    	    opacity: 1;
        }
    Ok. Habe ich jetzt mal so umgesetzt. Allerdings überdeckt die Hintergrundgrafik jetzt die Schrift.
    Hier einmal der Link zur Seite vielleicht bringt das ja was: http://.de

    Geht wie gesagt um die Navigations-Links unterhalb des Sliders.
    Geändert von ben_cms (04.10.2017 um 16:38 Uhr)

  10. #10
    Contao-Nutzer
    Registriert seit
    30.04.2015.
    Beiträge
    21

    Standard

    this should do:

    Code:
    #mod_customnav li{
    	position: relative;
    }
    
    #mod_customnav li::before{
    	content:"";
    	width: 100%;
    	height: 100%;
    	position: absolute;
    	top: 0;
    	left: 0;
    	background-image: url("../../files/tischlerweiss/bghover.png");
    	background-repeat: no-repeat;
    	background-size: 100;
    	opacity; 0;
    	transition: opacity .5s ease;
    }
    
    #mod_customnav li:hover::before{
    	opacity; 1;
    }

  11. #11
    Contao-Nutzer
    Registriert seit
    07.06.2016.
    Beiträge
    99

    Standard

    Zitat Zitat von DinKontao Beitrag anzeigen
    this should do:

    Code:
    #mod_customnav li{
    	position: relative;
    }
    
    #mod_customnav li::before{
    	content:"";
    	width: 100%;
    	height: 100%;
    	position: absolute;
    	top: 0;
    	left: 0;
    	background-image: url("../../files/tischlerweiss/bghover.png");
    	background-repeat: no-repeat;
    	background-size: 100;
    	opacity; 0;
    	transition: opacity .5s ease;
    }
    
    #mod_customnav li:hover::before{
    	opacity; 1;
    }
    Leider nicht. :/ Habe das erstmal wieder zurückgesetzt auf dem Zustand wie es ohne "before" war. Dann kann man auf der Seite sehen wie es eigentlich gedacht ist.
    Nur die Hintergrundgrafik soll halt nicht von 0 auf 100 "reinspringen" sondern langsam einblenden wie die Schrift.

  12. #12
    Contao-Nutzer
    Registriert seit
    30.04.2015.
    Beiträge
    21

    Standard

    Kannst du bitte meinen Code trozdem mal geschwind einbauen, und dem ::before noch ein display: block; geben?
    ds@futura-web.de

  13. #13
    Contao-Nutzer
    Registriert seit
    07.06.2016.
    Beiträge
    99

    Standard

    Ok. Ist wieder aktiviert.

  14. #14
    Contao-Nutzer
    Registriert seit
    30.04.2015.
    Beiträge
    21

    Standard

    opacity: 0 wird benötigt bei li::before... und bitte erst mal :hover auf a abschalten :-)

  15. #15
    Contao-Nutzer
    Registriert seit
    30.04.2015.
    Beiträge
    21

    Standard

    und dann
    Code:
    #mod_customnav li:hover::before{
    	opacity; 1;
    }

  16. #16
    Contao-Nutzer
    Registriert seit
    30.04.2015.
    Beiträge
    21

    Standard

    und li muss position: relative haben...

  17. #17
    Contao-Nutzer
    Registriert seit
    07.06.2016.
    Beiträge
    99

    Standard

    Also a:hover deaktivieren?
    Meiner Meinung nach ist das Element li anzusprechen aber der falsche Weg, weil das Background-Image dann ja den Link verdeckt und somit nicht mehr anklickbar ist!

    Hat sonst noch jemand vllt. eine Idee wie man das lösen könnte?

  18. #18
    Contao-Fan
    Registriert seit
    16.05.2014.
    Beiträge
    279

    Standard

    Wenn du

    <a>
    position: relative
    z-index: 100

    gibst bleibt die Schrift sichtbar.

  19. #19
    Contao-Nutzer
    Registriert seit
    07.06.2016.
    Beiträge
    99

    Standard

    Zitat Zitat von Znrl Beitrag anzeigen
    Wenn du

    <a>
    position: relative
    z-index: 100

    gibst bleibt die Schrift sichtbar.
    Super! Geht schon in die richtige Richtung.
    Allerdings bekomm ich zwischen den a:hover bzw. li:hover:before Elementen den Abstand nicht richtig eingestellt.
    Weder mit margin noch mit padding. Zwischen den Flächen sollen links und rechts immer 2.5px Abstand erhalten bleiben auch beim Hovern.
    Der linke Abstand funktioniert aber der rechte nicht.
    Geändert von ben_cms (07.04.2017 um 20:36 Uhr)

  20. #20
    Contao-Fan
    Registriert seit
    16.05.2014.
    Beiträge
    279

    Standard

    Z.B.:

    background-image entfernen in:
    Code:
    #mod_customnav span{}
    Eventuell die beiden entfernen:
    Code:
    #mod_customnav li::before{
    margin-right:2.5px;
    margin-left:2.5px
    }
    Das hinzufügen:
    Code:
    #mod_customnav li.active::before{
    opacity: 1
    }
    Die beiden attribute ändern (Rest lassen):
    Code:
    #mod_customnav li{
    width:24%;
    margin:0px 2.5px;
    }

  21. #21
    Contao-Nutzer
    Registriert seit
    07.06.2016.
    Beiträge
    99

    Standard

    Top! Jetzt hat es geklappt! Sauber Leute! Vielen Dank für eure Hilfe!

    Musste jetzt noch die <ul> rechts auf 8% reduzieren, damit die Navi insgesamt mittig sitzt.

    Hätte jetzt nicht gedacht, dass es so kompliziert werden würde!

    Anscheinend muss ich mich noch intensiver mit CSS auseinander setzen, grade was die ":before" bzw. ":after" Befehle angeht...

    Euch ein schönes WE!

    fetten Gruß
    Ben

  22. #22
    Contao-Nutzer
    Registriert seit
    07.06.2016.
    Beiträge
    99

    Standard Das ganze jetzt mit Dropdownmenü

    Moin Leute!

    Hat ja alles super geklappt, bis jetzt! :-)
    Aber wie es nunmal so ist folgt einem Problem dem nächsten :/

    Muss jetzt noch Unterseiten unterbringen via Dropdownmenü.

    Allerdings steht dem jetzt die ganze Geschichte mit der BG-Image beim hovern im weg.
    Für das Dropdownmenü ist alles soweit richtig angelegt...

    Damit das DD-Menü so angezeigt wird wie ich es haben möchte hab ich dem Element "#mod_customnav .nonavlink_css" die position "static" geben!
    Dabei verrutsch aber die BG-Grafik...
    Ich habe schon versucht die zuvor angelegten ":before" befehle zu duplizieren und damit das Element "mod_customnav .nonavlink_css span" anzusprechen.
    Das ist aber alles nicht zielführend...

    Grade ist #mod_customnav li:hover .level_2 auf position "static" eingestellt, so dass das Dropdownmenü auch ausklappt, aber die Navi wird dabei auseinander "gedrückt".

    Irgendwer ne Ahnung wie das zu lösen ist?

  23. #23
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.614
    User beschenken
    Wunschliste

    Standard

    Du kannst das auch ohne Pseudoelemente machen. Gib dem LI das Hintergrundbild und dem A eine Hintergrundfarbe (z.B. white), welche du dann nach transparent animierst.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  24. #24
    Contao-Nutzer
    Registriert seit
    07.06.2016.
    Beiträge
    99

    Standard

    Zitat Zitat von Andreas Beitrag anzeigen
    Du kannst das auch ohne Pseudoelemente machen. Gib dem LI das Hintergrundbild und dem A eine Hintergrundfarbe (z.B. white), welche du dann nach transparent animierst.
    Kapier ich nicht.

    Kann mir mal jemand erklären warum ich das Dropdownmenü nicht so gestaltet bekomme, dass wenn das Navigationsmenü ausgeklappt nicht die Navigationleiste auseinander fährt, sondern einfach über dem Rahmen der Navigationsleiste Ausklappt?

    EDIT: so wie ich es jetzt auf der Seite eingestellt habe, wird das Dropdownmenü in der Navigationsleiste wenn es ausgeklappt ist "versteckt" (Schatten ist leicht zu erkennen, beim hovern), die Navigationsleiste wird jetzt aber nicht mehr
    auseinander gefahren.

    EDIT: Wenn ich ".block" "overflow" auf "unset" setze wird das DM so ausgeklappt wie es eigentlich sein soll. Aber dadurch verschieben sich ja die anderen Elemente auf der Seite.
    Geändert von ben_cms (17.04.2017 um 15:20 Uhr)

  25. #25
    Contao-Nutzer
    Registriert seit
    07.06.2016.
    Beiträge
    99

    Standard

    So! Ich habe es zumindest vorläufig erstmal so gelöst:
    habe "#mod_customnav" das Attribut "overflow:unset" hinzugefügt und jetzt scheint es so zu passen!

    Danke für die Hilfe Leute!

  26. #26
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.614
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von ben_cms Beitrag anzeigen
    Kapier ich nicht.
    ...
    Kann mir mal jemand erklären warum ich das Dropdownmenü nicht so gestaltet bekomme, dass wenn das Navigationsmenü ausgeklappt nicht die Navigationleiste auseinander fährt, sondern einfach über dem Rahmen der Navigationsleiste Ausklappt?
    ...
    HTML-Code:
    <li>
      <a href="#">text</a>
    </li>
    Wenn das LI das Hintergrundbild bekommt und das A einen weißen Hintergrund, dann sieht man das Bild vom LI nicht. Wird die Hintergrundfarbe vom A dann von weiß nach transparent animiert, wird das Hintergrundbild des LI langsam sichtbar.

    Diese Dropdowns haben die aufzuklappenden Punkte normalerweise auf position:absolute;. Dann würde das Einblenden dieser Punkte keinen Einfluss auf andere Elemente nehmen.

    Nimm lieber overflow:visible; das verstehen alle Browser, unset nicht.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •