JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#container {
	height: auto;
	width: 800px;
    position: relative;
}
.image {
	background: white;
	margin: auto;
}

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