Verzögerung bei Bildwechsel mit CSS3

[JoLe05]

Hi!

Also ich habe einen div mit display block als link. in diesem div liegt als background ein bild und dieses wird beim hovern von einem anderen Bild ersetzt. Jedoch geht mir das viel zu schnell und ich bekomm es leider nicht gebacken das mit CSS3 zu machen... Wenn ich statt den Bildern Farben einsetzte funktioniert es einwandfrei? Geht das mit den bilder, wenn ja wie?

danke für eure Hilfe

 

[xion63]

AW: Verzögerung bei Bildwechsel mit CSS3

Hi,
also spontan hätte ich das mit JavaScript gelöst.
Wie machst du denn das mit Farben und CSS.

Grüße,
Ben

 

[tyler312]

AW: Verzögerung bei Bildwechsel mit CSS3

hi,

wie wäre es denn mit dieser lösung. habe ich selber auch schn gemacht, du musst das auch nicht mit opacity machen. kannst auch andere eigenschaften benutzen.

-ms-transition: opacity 1s;
-o-transition: opacity 1s;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
transition: opacity 1s;

 

[xion63]

AW: Verzögerung bei Bildwechsel mit CSS3

Ne andere CSS Lösung wäre es die Position des Hintergrunds zu verändern und 'transition-delay' zu verwenden, das funktioniert. Dann hättest du nur ein Bild, in dem halt beide Bilder sind. Dafür brauchst du dann ne feste Höhe und Breite, z.B.:

div:hover
{
background-position:0px;
transition-property: background-position;
transition-delay: 1s;
}
div
{
width:800px;
height:500px;
background-image:url(bg.jpg);
background-position:-200px;
}

 

[JoLe05]

AW: Verzögerung bei Bildwechsel mit CSS3

danke für die lösungsansätze!

also ums vielleicht ein bisschen einfacher zu erklären mit bilder diesmal:

also hier ist das hintergrundbild vom div:


dieses soll jetzt mittels hover ersetzt werden, natürlich verzögert



und hier der code:

#top-left{ 
    background: url(../images/123.jpg);
    width:270px;
    height:290px;

#top-left:hover { background: url(../images/123-hover.jpg);

}

das hover funktioniert, aber ich möchte halt einen kleinen delay damit das schöner ausschaut und nicht sofort gewechselt wird

 

[xion63]

AW: Verzögerung bei Bildwechsel mit CSS3

Okay, dann erstell dir so ein Bild (also doppelte Breite = 580px)


und benutze background-position.

div:hover 
{
background-position:-290px;
transition-property: background-position;
transition-delay: 1s;
}
div
{
width:290px;
height:270px;
background-image:url(bilder.jpg);
background-position:0px;
}

Das sollte funktionieren

 

[patrick_l]

AW: Verzögerung bei Bildwechsel mit CSS3

Also ich habe einen div mit display block als link.

Links werden nicht mit einer Div umgesetzt. Dafür ist der a-tag da.

<a href="#">Link</a>

in diesem div liegt als background ein bild [...]

Im CSS den Link nach Wunsch formatieren. Unter anderem die Bilder / Grafiken darüber einbinden. Sowohl für den Normal.- und Hover-zustand. Beim verwenden von Transitions die Vendor-Prefixe nicht vergessen.

-moz-     /* Firefox */
-webkit-  /* Webkit Browser (Chrome, Safari) */ 
-o-       /* Opera */ 
-ms-      /* Internet Explorer */

Liebe Grüße, Patrick