css3 reveal image transition

css3 reveal image transition

HTML

<div class="photo" >

</div>

CSS

.photo {
  width:300px;
  height:300px;
  background-image:linear-gradient(336deg,orange,white);
  opacity:0.5;
  transition:opacity 1s ease-in-out;
}

.photo:hover {
  opacity:1.5;
  background-image:linear-gradient(336deg,orange,red);
}