JSFiddle - React, Tailwind, and code Playground

HTML

<html>

  <head></head>

  <body>
    <section class="container showcase">
      <div class="row">
        <div class="col-lg-6 showcase-hover pd-0">
          <ul class="showcase-list">
            <li class="showcase-item">
              <a href="javascript:void (0);">
                        <img class="li-img"
                       src="https://www1.djicdn.com/cms_uploads/grid_root/background_image/197/8198bef06064af4dfcb02e83af4f08c6.jpg"
                             alt="">
                    </a>
            </li>
            <li class="showcase-item">
              <a href="javascript:void (0);">
                        <img class="li-img"
                             src="https://www4.djicdn.com/cms_uploads/grid_root/background_image/219/21891f1cc20983d23afbbb67659086e9.JPG"
                             alt="">
                    </a>
            </li>
            <li class="showcase-item">
              <a href="javascript:void (0);">
                        <img class="li-img"
                             src="https://www3.djicdn.com/cms_uploads/grid_root/background_image/210/20bc48701081f03a4625da59ac24c392.jpg"
                             alt="">
                    </a>
            </li>
            <li class="showcase-item">
              <a href="javascript:void (0);">
                        <img class="li-img"
                             src="https://www2.djicdn.com/cms_uploads/grid_root/background_image/211/c0ebdf0f3ed0ab3df5e6338ea88a6071.jpg"
                             alt="">
                    </a>
            </li>
          </ul>
        </div>
        </div>
    </section>
  </body>
</html>

CSS

.showcase-list {
  position: relative;
}

.showcase-list .showcase-item {
  position: absolute;
  width: 100%;
}

.showcase-item :first-of-type {
  width: 100%;
  opacity: 0;
  z-index: 20;
}