<div class="foo">
  <h1>hello world</h1>
  <div class="gradient">     
      
  <p>new text</p>
  <button>button</button>
  </div>
</div>

.foo {
  width: 400px;
  height: 200px;
  background: url(http://lorempixel.com/400/200/sports/);
transition: 800ms;
position:relative}
.gradient {
  top:0;
  left:0;
  position:absolute;
  transition: 800ms;
  opacity: 0;
  width: 100%;
  height: 100%;
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); 
}
.foo:hover .gradient {
  opacity: 1;
}