<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.