Transition-Ersatz bei :hover auf background-images

  • Hallo ihr ,

    ich wechsle gerade Bilder per :hover und background-image. Code:

    Code
    div.img-oben-neu {background: url(Bilder/Nutzung.jpg);background-size: cover;background-repeat: no-repeat;}
    div.img-oben-neu:hover {background: url(Bilder/Nutzung2.jpg);background-size: cover;background-repeat: no-repeat; }

    Das funktioniert soweit gut und ist auch responsive.

    Jetzt hätte ich aber eigentlich gerne noch ne transition mit .4s

    background-images kann man aber keine transition zuweisen... Gibts da vielleicht irgendeine andere Lösung. Hab mich jetzt durchs Internet gewühlt und nichts brauchbares gefunden..

    Ich hab gelesen, dass man das eine Bild relative positionieren kann und eins drüber legt mit position:absolute und dann mit der opacity spielt, der man ja auch ne transition zuweisen kann.

    Aber dann ist es ziemlich kompliziert das ganze responsiv zu bekommen (finde ich).

    Danke schonmal.

    Sun