JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box" >  
    <div class="imgWrap">
        <div class="imgWrap2">
            <img class="lightbox" src="http://i.dailymail.co.uk/i/pix/2012/12/04/article-2242647-0F79C42300000578-201_634x429.jpg"  />
        </div>
    </div>
    This is text    
</div>

CSS

.box{
   width:277px; 
  background:#FCFBDF;    
} 
img{
    width:277px;
    display:block;
}
.imgWrap{
    position:relative;
}
.imgWrap:before, .imgWrap:after, .imgWrap2:before, .imgWrap2:after{
    content:"";
    position:absolute;
    opacity:0.5;
    background:red;
}
.imgWrap:before {top:0; left:0; width:100%; height:10px;}
.imgWrap:after {bottom:0; left:0; width:100%; height:10px;}
.imgWrap2:before {top:10px; bottom:10px; left:0; width:10px;}
.imgWrap2:after {top:10px; bottom:10px; right:0; width:10px;}