CodePen

HTML

            
              <div class="tinted-image"></div>
<div class="tinted-wrap">
  <div class="tinted-image2"></div>
</div>
            
          
!

CSS

            
              .tinted-image,
.tinted-image2 {
  
  width: 300px;
  height: 200px;
  
  background: 
    /* top, transparent red */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
  
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.tinted-image:hover {
  background: 
    /* top, transparent red */ 
    linear-gradient(
      rgba(0, 255, 0, 0.45), 
      rgba(0, 255, 0, 0.45)
    ),
    /* bottom, image */
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
  
}

.tinted-wrap {
  width:300px;
  height:200px;
}

.tinted-image2 {
  position:relative;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
}

.tinted-image2:after {
  content: ' ';
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background:rgba(255,0,0,0.5);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.tinted-image2:hover:after {
  background:rgba(0,255,0,0.5);
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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