Masking Content With :before Pseudo Element

Using before with position absolute.

by bgrins

HTML

<div class='preview'></div>

CSS

.preview {
   width: 300px;
   height: 300px;
   border: solid 2px;
   position:relative;   
   background: rgba(255, 0, 0, .2);
}


.preview:before {
    content: '';
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    z-index: -1;
background-color: gray;
background-image: -webkit-linear-gradient(transparent 50%, rgba(255, 255, 255, .5) 50%);
background-size: 50px;
}