Text shaking/blurring during css transition

Question

I have been creating a hover transition for my card in css but the text inside the card in question shakes and blurs throughout the transition. Also if you look closely you can see that the edges of the card blur during the transition. I think there might be some kind of interference between the transitions but I can't seem to fix it. This is my code:

.card-wrapper {
  position: relative;
  width: 300px;

  display: inline-block;

  &::after {
    content: '';
    display: block;
    padding-top: 100%;
  }
}

.servizio-card {
  min-width: 0;
  width: 100%;

  display: flex;
  flex-direction: column;
  overflow: hidden;

  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 10%;

  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;

  margin-bottom: 1.5rem;

  animation-fill-mode: backwards;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  transition: 1s;
  z-index: 10;
  
  &:hover {
    transform: scale(1.1);
    
    .servizio-card-content-container {
      height: 60%;
      transform: scale(1.1);
    }
    
    .overlay {
      background-color: rgba(black, 0.35);
    }
    
    .button {
      opacity: 100;
    }
    
    img {
      transform: scale(1.1) rotate(-3deg);
    }
  }
}

.servizio-img {
  transition: 1s;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -10;
}

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  background-color: rgba(black, 0.5);
  transition: background-color 1s;
  z-index: 2
} 


.servizio-card-content-container {
  height: 40%;
  transition: 1s;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.servizio-card-title {
  margin-bottom: 5%;
  color: black;
}

.button {
  opacity: 0;
  display: inline-block;

  font-weight: 400;
  line-height: 1.5;
  color: white;

  text-align: center;
  text-decoration: none;
  vertical-align: middle;

  cursor: pointer;
  user-select: none;

  background-color: #0d6efd;
  border: 1px solid #0d6efd;
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;

  transition: opacity 1s;
}

<div class="card-wrapper">
  <div class="servizio-card box-shadow">
    <img
      src="https://i1.wp.com/potafiori.com/wp-content/uploads/2020/04/placeholder.png?ssl=1"
      class="servizio-img"
      alt="placeholder_img"
    />
    <div class="overlay">
      <div class="servizio-card-content-container">
        <h5
          class="servizio-card-title"
          style="
            font-size: 18px;
            font-weight: bold;
            min-height: 42px;
          "
        >
          Card
        </h5>
        <a href="#" class="button"
          >Find out more!</a
        >
      </div>
    </div>
  </div>
</div>