I am trying to find an alternative for this:
"transition:background-image 1s whatever"
in firefox since it only works on webkit browsers.
I already tried the opacity alternative but thats not an option for me since i have content on the background container which will disappear along with the background if using opacity.
Thank you.
For the transition background image, we use the transition property in CSS and add a transition to the background image in the style tag. transition: background-image 3s; In the script section, we create an image object and add the source of the image that needs to be transitioned.
You can do that using 2 pseudo elements
CSS
.test
{
width: 400px;
height: 150px;
position: relative;
border: 1px solid green;
}
.test:before, .test:after {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 1;
}
.test:before {
background-color: red;
z-index: 1;
transition: opacity 1s;
}
.test:after {
background-color: green;
}
.test:hover:before {
opacity: 0;
}
(hover to transition)
To be able to see the div content, the pseudo elements need to be in negative z-index:
looks like IE won't trigger this hover
.test:hover:before {
opacity: 0;
}
but will trigger this one
.test:hover {
}
.test:hover:before {
opacity: 0;
}
(As SILLY as it seems)
fiddle for IE10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With