JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div class="sicWrap">
    
    <div class="imageWrap">
        <image src="http://placekitten.com/g/200/300" alt="" />
        <div class="imageOverlay"></div>
    </div>
    
</div>

CSS

body { margin: 50px; }

.sicWrap {
    width: 160px;
    height: 260px;
    border: 1px solid red;
    overflow: visible;
    position: relative;
}

.imageWrap {
    position: absolute;
    top: -40px;
    left: -40px;
    width: 240px;
    height: 340px;
}

.imageOverlay {
    opacity: 0.5;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background: green;
}

.imageWrap img {
    width: 100%;
    height: 100%;
    opacity: 0.5;
    position: absolute;
    float: left;
}