Transition-Ersatz bei :hover auf background-images

Hallo ihr , ich wechsle gerade Bilder per :hover und background-image. Code: 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.

Der hier verwendete Code

<html> <head> <style> *{ margin:0; padding:0; } h1{ text-align:center; } body{ height:100% } div{ width:80vw; height:79vh; display:block; border:1px solid black; margin:10vh; background: url(https://basti1012.bplaced.net/image/2.png); background-size: cover; background-repeat: no-repeat; transition: background-image 0.5s ease-in-out; } div:hover { background: url(https://basti1012.bplaced.net/image/3.png); background-size: cover; background-repeat: no-repeat; transition: background-image 0.5s ease-in-out; } div1{ width:80vw; height:79vh; display:block; border:1px solid black; margin:10vh; background-image: url(https://basti1012.bplaced.net/image/2.png); background-size: cover; background-repeat: no-repeat; } div1:after{ content:''; background-image: url(https://basti1012.bplaced.net/image/3.png); transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; opacity:0.0; width:80vw; height:79vh; display:block; background-size: cover; background-repeat: no-repeat; } div1:hover:after{ opacity:1; } </style> </head> <body><h1> Normal </h1> <div></div> <h1> Oder mit after</h1> <div1></div1> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!