0

My transition doesn't work on FireFox though it works perfectly on Edge and Chrome.

I tried to search this problem on Google but still couldn't fix it.

Here's my code:

.background{
  width: 1280px;
  height: 720px;
  margin: 200px auto;
  background-image: url(../img/hinh2.png);
  -webkit-transition: background-image 1s ease-in-out;
  -o-transition: background-image 1s ease-in-out;
  -moz-transition: background-image 1s ease-in-out;
  transition: background-image 1s ease-in-out;
  background-size: contain;
}
.background:hover{
  width: 1280px;
  height: 720px;
  margin: 200px auto;
  background-image: url(../img/hinh1.png);
  background-size: contain;
}
<div class="background"></div>

Thanks a lot for helping me!

Minal Chauhan
  • 6,025
  • 8
  • 21
  • 41
tomdapchai
  • 3
  • 6
  • Firefox might not have support. https://stackoverflow.com/questions/9483364/css3-background-image-transition/16619705#16619705 – Tushar Shahi Jul 06 '21 at 05:20
  • Check if this helps https://stackoverflow.com/questions/19808764/transition-for-background-image-in-firefox – Tushar Shahi Jul 06 '21 at 05:21
  • 1
    Does this answer your question? [transition for background-image in firefox?](https://stackoverflow.com/questions/19808764/transition-for-background-image-in-firefox) – Tushar Shahi Jul 06 '21 at 05:21

1 Answers1

0

Firefox does not seem to support transitions on background-image yet. Using :before or :after pseudo-elements is one possible solution:

.background {
  width: 1280px;
  height: 720px;
  margin: 200px auto;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%);
  background-size: contain;
}

.background::after {
  width: 1280px;
  height: 720px;
  content: "";
  background-image: linear-gradient(270deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%);
  background-size: contain;
  z-index: 1;
  position: absolute;
  transition: 1s ease-in-out opacity;
  opacity: 0;
}

.background:hover::after {
  opacity: 1;
}
<html>

<head>
  <meta charset="utf-8">
  <title>Background hover</title>
</head>

<body>
  <div class="background"></div>
</body>

</html>
kartikkukal
  • 16
  • 1