CSS3 transition property not working on linear gradient background

Question

I'm trying to add transition on background linear gradient but its not working.How can I fixed it?

.each-candidates {     
  text-align: center;
  width: 265px;
  height: 310px;
  background: linear-gradient(to bottom , #db2431, purple);  
}

.background2 {
  background: linear-gradient(to bottom , purple,#db2431);   
  opacity: 0;
  transition: opacity 1000ms;
  -webkit-transition: opacity 1000ms;
}

.background2:hover {
  opacity: 1;
}

<div class="each-candidates">
  <div class="each-candidates background2"></div>
</div>

Here is link http://jsfiddle.net/AashirKhan/7gxnr7cb/8/