CodePen

HTML

            
              <div class="product">
  <div class="product-hover"></div>
  <div class="product-inner">
    <p>Text goes here! Lots of text! Loads of it! All over the place!</p>
  </div>
</div>
            
          
!
via HTML Inspector

CSS

            
              @import url(http://fonts.googleapis.com/css?family=Ropa+Sans);

body {
  padding: 20px;
  font-family: 'Ropa Sans', sans-serif;
}

.product {
  width: 376px;
  padding: 15px;
  position: relative;
  margin: 0 auto;
  
  .product-inner {
    position: relative;
    background: white;
    padding: 1em;
  }
}
.product-hover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: opacity 0.3s ease;
  background-size: 30px 30px;
  background-image: linear-gradient(
    45deg, 
    rgba(orange, 0.5)  25%, 
    rgba(black, 0.5)   25%, 
    rgba(black, 0.5)   50%, 
    rgba(orange, 0.5)  50%, 
    rgba(orange, 0.5)  75%, 
    rgba(black, 0.5)   75%, 
    rgba(black, 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 ..................