CodePen

HTML

            
              <div class="tinted-image red"> 
  <h1>Lets put some text here</h1>
</div>

            
          
!

CSS

            
              .tinted-image {
  width: 300px;
  height: 200px;
  background: 
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
}

.red:after {
  content: '';
  position: absolute;
  width: inherit;
  height: inherit;
  top: 0;
  left: 0;
  background: -moz-linear-gradient(top,  rgba(255,255,255,0.15) 50%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,rgba(255,255,255,0.15)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.15) 50%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,0.15) 50%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,0.15) 50%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,0.15) 50%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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