0

I'm trying to change the background color, but transition doesn't work. 

#container {
  width: 95%;
  height: 720px;
  margin-top: 15px;
  font-size: 18px;
  color: white;
  text-align: center;
  padding-top: 15px;
  background: linear-gradient(135deg, transparent 15px, rgba(58, 58, 58, 0.5) 0) top left, linear-gradient(-135deg, transparent 15px, rgba(58, 58, 58, 0.5) 0) top right, linear-gradient(-45deg, transparent 15px, rgba(58, 58, 58, 0.5) 0) bottom right, linear-gradient(45deg, transparent 15px, rgba(58, 58, 58, 0.5) 0) bottom left;
  background-repeat: no-repeat;
  background-size: 50% 50%;
  margin-left: auto;
  margin-right: auto;
  transition: 2s;
  transition-property: background;
}

#container:hover {
  background: linear-gradient(135deg, transparent 15px, rgba(60, 50, 0, 0.81) 0) top left, linear-gradient(-135deg, transparent 15px, rgba(60, 50, 0, 0.81) 0) top right, linear-gradient(-45deg, transparent 15px, rgba(60, 50, 0, 0.81) 0) bottom right, linear-gradient(45deg, transparent 15px, rgba(60, 50, 0, 0.81) 0) bottom left;
  background-repeat: no-repeat;
  background-size: 50% 50%;
  transition: 2s;
  transition-property: background;
}
<div id="container"></div>

I don't want to add opacity or background-color, because it changes the result which I want to get.

Do you have any ideas why it doesn't work?

Pete
  • 57,112
  • 28
  • 117
  • 166
Piotr Podyma
  • 11
  • 1
  • 2
  • 6
  • If you don't want to work with opacity or background-color, what is the result you want to get? Can you explain the desired effect some more? – dom_ahdigital Dec 04 '17 at 09:58
  • Just in case you didn't read the comments under the accepted answer, you can use a pseudo element and animate it's opacity: https://jsfiddle.net/z6pnrns2/ – Pete Dec 04 '17 at 10:06

0 Answers0