JSFiddle - React, Tailwind, and code Playground

by Jader Wagner

HTML

<div class="jumbo-destaque">
    <div style="background-image: url(http://drop.studiogt.com.br/g8/img/berinjela-tomato.png)"></div>
    <img src="http://drop.studiogt.com.br/g8/img/berinjela-tomato.png">
</div>

CSS

.jumbo-destaque {
    position:relative;
    width:640px;
    height:360px;
}
.jumbo-destaque div {
    background-size: cover;
    width:100%;
    height:100%;
    opacity: 0.5;
}
.jumbo-destaque IMG {
    position:absolute;
    border: 8px solid #fff;
    top: calc(50% - (320px /2));
    left: calc(50% - (471px /2));
}