CSS3 Transition / Bild "fadet" nicht bei :hover

fertone · #1 (**permalink**) 28.03.2012, 16:16

Hallöchen werte Community.

Ich wende mich heute wiedermal mit einem "Problemchen" an Euch, welches eigentlich keines sein sollte. Ich geh ganz stark davon aus, dass ich etwas "nicht ganz richtig" gemacht habe.

Leider konnte mir die Su-Fu hierbei auch nicht wirklich weiterhelfen....

Beispiel:
Ich habe ein Element (Call to action button), welcher bei "Mouse over" ein anderes Bild zeigen soll. Dieses ist mit CSS3 und Sprites bisher ganz gut gelungen.
Allerdings passiert der Austausch der Bilder sichtlich über ein "hineinfahren" von unten nach oben.
Ich würde gern die Bilder "Ineinanderfaden" lassen. -> Also das erste soll von opacity 1 auf 0 und das zweite von 0 auf 1.

Ist dieses mit Sprites überhaupt möglich? Nach ewiger Testphase (und dabei werde ich bald noch verrückt!) klappt es leider nicht.

Code:

HTML-Code:

<div id="mitglied_werden"><a class="bildlink" href="http://localhost:8888/mitglied-werden/"><p>Mitglied werden!</p></a></div>

Code:

a.bildlink p {
	text-indent: -9999px;
}
a.bildlink {
	height: 81px;
	width: 135px;
	display: inline-block;
	position: relative;
	background: url('images/mitglied_werden_sprite.png') 0 0 no-repeat;
	-moz-transition: all 0.3s linear;
	-webkit-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
a.bildlink:hover {
	background: url('images/mitglied_werden_sprite.png') 0 -81px; no-repeat;
	border: none;
}

Vielen Dank schonmal!

fricca · #2 (**permalink**) 28.03.2012, 17:02

Du änderst die Position des Hintergrundbildes. Das ist das, was du "hineinfahren" nennst.
Nein, ein "Fade" ist so nicht möglich.

Bitte poste immer einen Link zum Problem. Gerade wenn es um Bilder geht sind Codeschnipsel nutzlos.
http://xhtmlforum.de/40080-f-r-frage...twortende.html

fertone · #3 (**permalink**) 28.03.2012, 17:09

Danke für die Bestätigung. Wie sollte das auch funktionieren. War halt auch ne doofe Frage!
Da es für ein Kundenprojekt ist, ging das mit dem Link nicht (außerdem Lokal im MAMP). Aber die Beschreibung half ja auch... hihi

Dann werde ich das wohl ohne Sprites lösen.

div im div, wobei das innere die opacity von 1 hat und bei hover auf 0 gesetzt wird. Das müsste dann ja auch wie gewollt funktionieren!

Danke für die rapid schnelle Antwort!

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Hilfe css Menu center	xXcyberXx	CSS	5	28.11.2010 19:51
ein bild für bild und hover - background-position	monran	CSS	7	22.06.2010 20:31
CSS Navigation - Problem mit IE6	pcklinik	CSS	4	18.09.2007 12:04
Darstellungsproblem CSS Navigation im IE7	pcklinik	CSS	7	09.09.2007 17:25
CSS Einsteiger bittet um Hilfe	pcklinik	CSS	0	06.09.2007 14:40