How to correct slide overlays during transition?

I have aside with transition elements of images (slides) that adjust their size according to the size of the browser.

When the browser is in a dimension that does not resize the banners, everything works perfectly fine. As in the example below:

Theproblemappearswhenthebrowserdimensioncausesthebannerstoadjusttheirmeasurements.Asintheimagebelow:

Whathappenswhenbannersareresizedbecauseofbrowserwidthisthatattheexactmomentofthetransitionthereisanimageoverlay.Whentheimagechanges,theoverlapdisappears,leavingthenormalbanneruntilthetransitionoccursagain.Seethephotobelowtheeffectoftheoverlap:

Ilookedforseveralways,butnothingtocorrectthesituation.

CSS

aside{background-color:#ccc;margin-top:10px;width:100%;margin-bottom:10px;box-sizing:border-box;display:flex;flex-direction:row;}.rslideslt{width:100%;max-width:300px;height:auto;margin-bottom:10px;margin-top:10px;}.rslidesltli{-webkit-backface-visibility:hidden;display:none;}.rslidesltli:first-child{position:relative;display:block;float:left;}.rslidesltimg{height:auto;width:100%;max-width:300px;}

HTML

<aside><ulclass="rslideslt">     

          <li>          
          <img src="./propaganda_lateral/001.jpg">
          </li>

          <li>          
          <img src="./propaganda_lateral/002.jpg">
          </li>

          <li>          
          <img src="./propaganda_lateral/003.jpg">
          </li>

      </ul>

      <ul class="rslideslt">

          <li>          
          <img src="./propaganda_lateral/004.jpg">
          </li>

      </ul>


      <ul class="rslideslt">

          <li>          
          <img src="./propaganda_lateral/005.jpg">
          </li>

      </ul>

 </aside>