JSFiddle - React, Tailwind, and code Playground

HTML

<section class="GridSection">
  <div class="GridSectionOverflowWrapper">
    <div class="SpecialOffersSlider">
      <div class="SpecialOffer">
        <div class="SpecialOfferBackground">
          <img src="https://pp.userapi.com/c836538/v836538768/3bab2/7jSdVeeXyJs.jpg">
        </div>
      </div>
    </div>             
  </div>
</section>

CSS

body {
  background-color: black;
}

.GridSection {
    position: relative;
    height: 7vw;
    width: 15vw;
    top: 4.5vw;
}

.GridSectionOverflowWrapper {
    position: absolute;
    height: 100%;
    width: 100%;
}

.GridSectionOverflowWrapper:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: white;
    transform: translateZ(0);
}

.SpecialOffersSlider {
    position: absolute;
    height: 100%;
    width: 100%;
}

.SpecialOffer {
    position: absolute;
    overflow: hidden;
    height: 100%;
    width: 100%;
    transform: none !important;
}

.SpecialOfferBackground {
    position: absolute;
    height: 130%;
    width: 130%;
    top: -15%;
    left: -15%;
    transform: translateY(-7.5%) translateX(-7.5%);
}

.SpecialOfferBackground img {
    height: 100%;
}