JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="photo_box">
        <img src='http://www.kurzweilai.net/images/Google-logo.jpg' class="photo">
        <div class="photo_tint"></div>
    </div>
    
    
    
</div>

CSS

#container {
    padding: 10px;
    width: 1000px;
    height: 500px;
    background: blue;
}

.photo_box {
    padding: 8px 10px 11px 10px;
    background: #fff;
    -webkit-box-shadow: 1px 1px 6px rgba(50, 50, 50, 0.25);
    -moz-box-shadow:    1px 1px 6px rgba(50, 50, 50, 0.25);
    box-shadow:         1px 1px 6px rgba(50, 50, 50, 0.25);
    border-radius: 5px; 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    display: inline-block;
    position:relative;
}

.photo {
    position: relative;
    z-index: 0;
    margin-bottom: 13px;
    border-radius: 5px; 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.photo_tint {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
    background: red;
    -moz-opacity: 0.70;
    opacity: 0.70;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
    top:0;
    left:0;
}