CSS3 Crossfade bg Bild wenn Cover verwendet wird - CSS3, CSS-Übergänge, CSS-Animationen

Ich versuche, bg-Bild mit CSS3 zu animieren / zu überblenden. Ich weiß, dass das funktioniert, aber nur in Chrome für jetzt:

.image {
width: 100%;
height: 100%;
background-size: cover;
transition: background-image .5s ease-in;
background-image: url(../image.jpg);
}

.image:hover {
background-image:url(../image1.jpg;
}

In Chrome funktioniert das gut, mit nahtlosÜbergang von einem Bild zum anderen. Ich weiß, dass ich Hintergrund-Position-Eigenschaft mit CSS3-Keyframes und Sprite-Bild animieren kann, aber das Problem ist, dass ich Cover-Eigenschaft verwenden muss. Wenn ich genaue Maße meines Halters div kenne, dann funktioniert das Ändern der Hintergrundposition mit Keyframes wie ein Zauber, aber wenn man Hintergrundgröße hinzufügt: Cover in der Mischung, nun, das einzige, was ich sagen kann, dass die Ergebnisse nicht wie erwartet sind.

Gibt es einen Workaround dafür?

Antworten:

Sie können das zweite Bild auf ein Pseudo-Element setzen und einfach die Deckkraft ändern, um den Hover-Effekt zu erzeugen

.test {
position: relative;
width: 450px;
height: 300px;
background-image: url(http://placekitten.com/300/200);
background-size: cover;
}


.test:after {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-image: url(http://placekitten.com/600/400);
background-size: cover;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
transition: opacity 1s;
opacity: 0;
}

.test:hover:after {
opacity: 1;
}

Geige

Das funktioniert übrigens auch browserübergreifend