How to fix slide overlay during transition?

Question

I have a aside with image transition elements (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 well. As in the example below:

The problem appears when the size of the browser causes the banners to adjust their measurements. As in the image below:

What happens when banners are resized due to the width of the browser is that at the exact moment of transition there is an image overlay. When the image changes, the overlay disappears, leaving the normal banner until the transition occurs again. See in the photo below the effect of the overlay:

I have tried various means, but nothing to correct the situation.

CSS and HTML

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;
}

.rslideslt li {
-webkit-backface-visibility: hidden;
display: none;
}

.rslideslt li:first-child {
position: relative;
display: block;
float: left;
}

.rslideslt img {

height: auto;
width: 100%;
max-width: 300px;
}

<aside>
      <ul class="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>