CodePen

HTML

            
              <h1>Faking a tinted transition using a long <code>linear-gradient</code></h1>
<div id="tint"></div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              #tint {
  width: 600px;
  height: 300px;
  background: 
    linear-gradient(
      rgba(255,0,0,0.4) 5%,
      rgba(0,255,0,0.25) 95%
    ) 0 0 / 100% 2000%,
    url(http://placekitten.com/g/600/300) no-repeat 0 0 / auto;
  transition: .5s background-position linear;
}

#tint:hover {
  background-position: 0% 100%, 0 0;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................