JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="image">
		<div class="left"></div>
		<div class="right"></div>
		<img width="500" src="https://www.google.com.au/images/srpr/logo11w.png" />
	</div>
	<div class="image">
		<div class="left"></div>
		<div class="right"></div>
		<img width="300" src="https://www.google.com.au/images/srpr/logo11w.png" />
	</div>
    <div class="image">
		<div class="left"></div>
		<div class="right"></div>
		<img width="100" src="https://www.google.com.au/images/srpr/logo11w.png" />
	</div>
</div>

CSS

#container {
	height: auto;
	width: 500px;
}
.image {
	background: white;
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

.left {
	width: 150px;
	height: 100%;
	z-index: 2;
	background: black;
	top: 0px;
    opacity:0.5;
	position: absolute;
	left: 0px;
}
.right {
	width: 150px;
	height: 100%;
	z-index: 2;
    opacity:0.5;
	position: absolute;
	background: black;
	top: 0px;
	right: 0px;
}
.image img {
	margin: auto;
	display: block;
}