transition for background-image in firefox?

by

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;
}

fiddle with real images

(hover to transition)

To be able to see the div content, the pseudo elements need to be in negative z-index:

fiddle with corrected 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

More Related Contents:

  1. Hide scroll bar, but while still being able to scroll
  2. Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?
  3. How to remove the arrow from a select element in Firefox
  4. Setting transform-origin on SVG group not working in Firefox
  5. Remove outline from select box in FF
  6. Div 100% height works on Firefox but not in IE
  7. Flexbox column-reverse in Firefox, Edge and IE
  8. How do I make Firefox auto-refresh on file change?
  9. Different implementation of Flexbox in Firefox and Chrome
  10. Style a checkbox in firefox — remove check and border
  11. :before && :after pseudo elements not showing Firefox
  12. Firefox 30 is not hiding select box arrows anymore
  13. “break-inside: avoid-column” doesn’t work in Firefox
  14. text-decoration not working for visited state link
  15. Is it possible to change the order of list items using CSS3?
  16. How do I get placeholder text in firefox and other browsers that don’t support the html5 tag option?
  17. Vertical scroll rendering issue in Flexbox in Firefox [duplicate]
  18. 2 colors in one placeholder of input field
  19. Flex elements ignore percent padding in Firefox
  20. Change select box option background color
  21. When to use the !important property in CSS [duplicate]
  22. Inline elements and line-height
  23. Text overflow ellipsis on two lines
  24. How can I make a link from a table cell
  25. How does one use the onerror attribute of an img element
  26. How can I make a 45 degree responsive ribbon with folded corner?
  27. Border with a transparent centred arrow
  28. Add outward curving border to elements like this: ◝◟___◞◜
  29. Target IE9 Only via CSS [duplicate]
  30. HTML/CSS set div to height of sibling

Leave a Comment