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

[ben_cms]

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:

#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

[Exzentrik]

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

[Spooky]

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.

[dazzle89]

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.

[ben_cms]

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:

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

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.

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

[dazzle89]

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

[ben_cms]

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.

[dazzle89]

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:

<a href=""><span>Hier der Text</span></a>

Dem <a> musst du position: relative; geben.

Dazu folgende Anweisungen:

 #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;
    }

[ben_cms]

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:

<a href=""><span>Hier der Text</span></a>

Dem <a> musst du position: relative; geben.

Dazu folgende Anweisungen:

 #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.

[DinKontao]

this should do:

#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;
}

[ben_cms]

this should do:

#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.

[DinKontao]

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

[ben_cms]

Ok. Ist wieder aktiviert.

[DinKontao]

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

[DinKontao]

und dann

#mod_customnav li:hover::before{
	opacity; 1;
}

[DinKontao]

und li muss position: relative haben...

[ben_cms]

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?

[Znrl]

Wenn du

<a>
position: relative
z-index: 100

gibst bleibt die Schrift sichtbar.

[ben_cms]

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.

[Znrl]

Z.B.:

background-image entfernen in:

#mod_customnav span{}

Eventuell die beiden entfernen:

#mod_customnav li::before{
margin-right:2.5px;
margin-left:2.5px
}

Das hinzufügen:

#mod_customnav li.active::before{
opacity: 1
}

Die beiden attribute ändern (Rest lassen):

#mod_customnav li{
width:24%;
margin:0px 2.5px;
}

[ben_cms]

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

[ben_cms]

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?

[Andreas]

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.

[ben_cms]

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.

[ben_cms]

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!

[Andreas]

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?
...

<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.