<div class="container my-container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">
      <div class="tryonline">
        <img class="red" src="https://i.imgur.com/HiB1H8P.png">
        <img class="blue" src="https://i.imgur.com/ux5uNiL.png" width="500">
      </div>
    </div>
    <div class="col">
      <div class="tryonline">
        <img class="red" src="https://i.imgur.com/HiB1H8P.png">
        <img class="blue" src="https://i.imgur.com/ux5uNiL.png" width="500">
      </div>
    </div>
    <div class="col">
      <div class="tryonline">
        <img class="red" src="https://i.imgur.com/HiB1H8P.png">
        <img class="blue" src="https://i.imgur.com/ux5uNiL.png" width="500">
      </div>
    </div>
    <div class="col">
      <div class="tryonline">
        <img class="red" src="https://i.imgur.com/HiB1H8P.png">
        <img class="blue" src="https://i.imgur.com/ux5uNiL.png" width="500">
      </div>
    </div>
    <div class="col">
      <div class="tryonline">
        <img class="red" src="https://i.imgur.com/HiB1H8P.png">
        <img class="blue" src="https://i.imgur.com/ux5uNiL.png" width="500">
      </div>
    </div>
    <div class="col">
      <div class="tryonline">
        <img class="red" src="https://i.imgur.com/HiB1H8P.png">
        <img class="blue" src="https://i.imgur.com/ux5uNiL.png" width="500">
      </div>
    </div>
  </div>
</div>

.my-container .col{
  margin-bottom:1rem;
}
.tryonline {
  position: relative;
}
.red {
  width: 100%;
  height: auto;
}
.blue {
  position: absolute;
  top: 15.5%;
  left: 45.5%;
  transform: rotate(45deg);
  transform-origin: 0 0;
  width:70%;
  height: auto;
}

/* 

Forum question answer only

https://www.sitepoint.com/community/t/transformed-image-resizing-strangely-inside-a-bootstrap-grid/425406



*/