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>